SlideShare a Scribd company logo
1 of 57
Macromedia Flash 8 1
LKS 1
Kompetensi Dasar:
Mengidentifikasi fungsi menu dan ikon pada perangkat lunak pengolah animasi
Indikator:
 Mengidentifikasi program animasi
 Mengidentifikasi tampilan/layar kerja aplikasi animasi
 Mengidentifikasi fungsi menu dan ikon pada aplikasi animasi
1. Mengenal Layar Kerja
Perhatikan tampilan layar kerja Macromedia Flash di bawah ini!
Keterangan gambar:
1. Menu bar : kumpulan instruksi-instruksi atau perintah yang digunakan
dalam Flash.
2. Color Window : untuk mengatur warna pada objek yang telah dibuat.
3. Library : kumpulan langkah-langkah dalam flash.
4. ToolBox : alat-alat yang digunakan untuk menggambar objek pada stage.
5. Stage : tempat area kerja dalam membuat sebuah animasi.
6. Timeline : mengatur dan mengontrol objek yang dibuat dalam stage
87
5
4
3
216910
Macromedia Flash 8 2
untuk dibuat animasinya.
7. Properties : untuk mengatur properti dari objek yang dibuat.
8. Scrollbar : untuk menggeser posisi stage.
9. Layer : tempat untuk meletakkan sebuah objek.
10. Judul : untuk memberikan nama pada stage yang akan kita buat.
2. Dasar-dasar untuk menggambar
Toolbox
Terbagi atas tiga bagian
 Tools untuk menggambar
Nama ikon dan kegunaannya :
a. Sub selecetion tool : untuk memilih titik-titik pada suatu objek (merubah objek).
b. Fiil Transform tool : untuk pengaturan warna terang dan gelap pada objek.
c. Lasso tool : untuk memilih daerah objek yang akan di edit.
d. Text tool : untuk membuat teks.
e. Rectangel tool : untuk menggambar sebuah segi empat.
f. Brush tool : untuk menggambar objek dengan menggunakan kuas.
g. Paint Bucket tool : untuk menambah, memberi, mengubah warna pada bidang
objek yang akan dibuat.
h. Eraser tool : untuk menghapus area yang tidak diinginkan dari suatu objek.
i. Arrow tool : untuk memilih atau memindahkan suatu objek.
j. Free Transform tool : untuk memutar (rotate) objek/mengubah bentuk objek menjadi
bentuk lain.
k. Line tool : untuk membuat sebuah garis.
l. Pen tool : untuk menggambar dan merubah bentuk suatu objek dengan
menggunakan edit points.
m. Oval tool : untuk menggambar sebuah elips atau lingkaran.
n. Pencil tool : untuk menggambar sebuah objek/garis-garis bebas seperti
i
j
k
l
m
n
o
p
b
a
c
d
e
f
g
h
Macromedia Flash 8 3
menggunakan pensil biasa.
o. Ink Bottle tool : untuk menambah, memberi dan mengubah warna pada garis di
pinggir suatu objek (stroke).
p. Dodge tool : untuk mengidentifikasikan warna dalam suatu objek.
 Tools untuk tampilan stage
a. Hand tool untuk menggerakkan suatu tampilan objek tanpa merubah posisi objek
b. Zoom tool untuk memperbesar/memperkecil tampilan objek
 Tools untuk memberi warna
a. Stroke color : untuk memberikan warna pada garis/border objek.
b. Fill color : untuk memberikan warna pada objek.
c. Swap color: : untuk menukar warna objek(fill color) dengan warna
border/garis (stroke color).
d. Black & white : untuk memberi warna objek dan warna border/garis dengan
warna hitam putih.
3. Membuat dan Menyimpan Dokumen Baru
A. Membuat Dokumen
A.1. Membuat dokumen dengan Flash Document
Untuk membuat dokumen dapat dilakukan dengan memilih menu File > New Template,
atau dengan menggunakan shortcut-key Alt F + N
a b
a
b
cd
Macromedia Flash 8 4
 Mengubah property document
Untuk mengubah property document dapat dilakukan melalui menu Modify > Document,
akan muncul tampilan kotak dialog di bawah ini:
Width : untuk menentukan lebar area dokumen.
Height : untuk menentukan tinggi area dokumen.
Background Color : untuk menentukan warna background dokumen.
Frame rate berfungsi : untuk menentukan jumlah frame yang digunakan.
Ruler units : untuk menentukan type ukuran yang akan digunakan.
Contoh latihan :
 Ubah properties document dengan:
Width : 300, Height : 200, Background Color : hitam
 Tambahkan teks pada stage : PESONA EDU iLEARNING (dengan warna merah)
Macromedia Flash 8 5
A.2. Membuat dokumen melalui Template
Selain membuat dokumen dengan blank document, kita juga dapat membuat dokumen
dengan template. Caranya pilih menu File > New Template maka akan muncul kotak
dialog di bawah ini:
Pada list Category kita dapat memilih jenis dokumen yang akan dibuat, sedangkan
Templates untuk menentukan bentuk yang akan dibuat.
Contoh:
Buat template sesuai gambar di bawah ini!
B. Menyimpan Dokumen
Simpan file dokumen
Perhatikan file yang telah terbentuk mempunyai ekstensi .fla. Ketik nama file dan klik
tombol Save.
Macromedia Flash 8 6
4. Menggambar dan Memodifikasi Gambar
Untuk membuat gambar yang baik, kita terlebih dahulu harus memahami konsep-konsep
menggambar dengan flash, misalnya konsep gambar saling berpotongan dan mengecat
gambar.
Menggambar Obyek Garis
Obyek garis dapat digambar dengan menggunakan:
 Line Tool
Latihan :
Buatlah gambar seperti di bawah ini!
Untuk memilih bentuk garis yang dibuat, atur pilihan pada panel properties seperti
gambar di bawah ini:
1 2 3
4
1. Stroke color : untuk memberikan warna pada garis.
2. Stroke height : untuk menentukan ketebalan garis.
3. Stroke style : untuk menentukan tipe garis.
4. Fill color : untuk memberikan warna dalam pada objek.
 Pencil Tool (Y)
Untuk merapikan gambar garis dengan pencil tool dapat dilakukan dengan modifier tool
Macromedia Flash 8 7
Ada tiga jenis pencil mode, yaitu:
a. Straighten
b. Smooth
c. Ink
Langkah-langkah menggunakan pencil tool
 Klik pencil tool pada toolbox, kemudian pilih mode pencil tool, dalam hal ini pilih
straighten kemudian gerakkan pencil pada stage.
 Gambar a menggunakan mode straighten
 Gambar b menggunakan mode smooth
 Gambar c menggunakan mode ink
 Ubah masing-masing gambar dengan warna dan ketebalan berbeda melalui panel
properties!
 Pen Tool (P)
Untuk membuat garis lurus atau segmen-segmen garis kurva secara tepat dapat
menggunakan pen tool (p)
Langkah-langkahnya:
 Klik pen tool
 Pilih warna, tebal garis, dan jenis garis pada panel properties
 Gambarkan garis pada stage
a b c
Macromedia Flash 8 8
Contoh gambar:
Latihan :
Gambarlah bentuk di bawah ini!
 Brush Tool (B)
Untuk membuat garis dengan efek-efek tertentu seperti sapuan kuas digunakan brush tool
Langkah-langkahnya:
 Klik ikon brush tool
 Atur properties
 Pilih ukuran kuas
Bahkan kita juga bisa gunakan untuk menulis teks, misalnya di bawah ini:
Macromedia Flash 8 9
Menggambar Bentuk Kotak
Untuk menggambar bentuk kotak atau sejenisnya dapat digunakan ikon rectangle tool ( R).
Gambarlah bentuk di bawah ini!
Latihan : gambarlah bentuk di bawah ini
Menggambar Ellips dan Lingkaran
Untuk menggambar ellips dan lingkaran digunakan ikon Oval Tool pada toolbox.
Gambarlah bentuk di bawah ini!
Untuk mengatur bentuk sudut-sudutnya
digunakan ikon Free Transform tool
yang terdapat pada tool properties.
Macromedia Flash 8 10
Kompetensi Dasar:
Menggunakan tools pada perangkat lunak pengolah animasi
Indikator:
 Menggunakan menu dan ikon untuk membuat objek/gambar
 Menggunakan menu dan ikon untuk melakukan seleksi
 Menggunakan menu, ikon, dan panel untuk mengedit objek/gambar
I. Memilih Objek
Memilih objek sama artinya dengan memblok objek atau sebagian objek tertentu.
Jadi untuk memodifikasi objek maka diperlukan cara untuk memilih objek tersebut.
Berikut contoh beberapa objek terbentuk:
Unselected
original shape
Stroke
selected
Fill
selected
Stroke and
fill selected
Group
selected
Macromedia Flash 8 11
Ada beberapa metode untuk memilih objek:
 Memilih objek dengan Arrow Tool
- memilih garis tepi objek (Stroke selected)
klik 1x pada bagian tepi objek
- memilih bidang objek (Fill selected)
klik 1x pada bidang objek
- memilih suatu objek/instance (Stroke and fill selected)
klik ganda (double-click) pada objek, akan terlihat seluruh objek terseleksi (garis tepi
dan bidang objek)
- memilih beberapa objek
Untuk memilih beberapa objek dapat dilakukan dengan cara Shift + klik objek atau
blok objek dengan membentuk suatu segiempat di sekeliling objek.
 Memilih objek dengan Lasso Tool
Lasso tool digunakan apabila daerah yang akan dipilih tidak mempunyai bentuk teratur.
Misalnya kita ingin memblok gambar buahnya saja seperti terlihat pada gambar di bawah
ini
Macromedia Flash 8 12
II. Memindahkan Objek
Untuk memindahkan objek, kita dapat lakukan dengan cara:
 Dengan men-drag objek
Caranya :
a. pilih selection tool
b. klik pada objek yang akan dipindahkan, tekan mouse kemudian pindahkan objek ke
posisi yang baru
untuk memindahkan sekaligus menyalin objek gunakan Alt-drag
untuk memindahkan objek 450
atau kelipatannya gunakan Shift-drag
 Menggunakan tombol panah pada keyboard
a. pilih objek yang akan dipindahkan dengan
b. pindahkan objek dengan menggunakan tombol panah pada keyboard (pergerakan 1
pixel), gunakan Shift + tombol panah untuk pergerakan 10 pixel
 Mengubah properties window
a. pilih objek yang akan dipindahkan dengan
b. ubah nilai x dan y pada window properties
 Menggunakan panel info
a. pilih objek yang akan dipindahkan dengan
b. masukkan nilai x dan y untuk menentukan posisi objek (posisi kiri-atas objek) pada
panel info
 Memindahkan/menyalin objek
a. pilih objek yang akan dipindahkan dengan
b. pilih menu Edit, Cut atau Edit, Copy
c. tentukan layer, scene, atau file untuk menempatkan objek hasil
d. pilih menu Edit, Paste  objek hasil akan ditempatkan pada posisi tengah stage
pilih menu Edit, Paste in Place  objek hasil ditempatkan pada posisi yang sama
sesuai dengan posisi objek asal
Macromedia Flash 8 13
Latihan:
Dari cara-cara di atas buatlah gambar seperti di bawah ini!
III.Menggrup dan memecah objek
Untuk memodifikasi beberapa elemen dapat dilakukan dengan cara menggrup elemen-
elemennya.
Perhatikan gambar di bawah ini!
Perintah untuk menggrup adalah : Modify > Group
Dari gambar di atas jadikanlah menjadi gambar di bawah ini dengan warna bunga yang
berwarna-warni!
Gambar yang terdiri dari beberapa
elemen
Gambar setelah digrup
Macromedia Flash 8 14
IV.Transformasi dan copy objek
Transformasi dengan menggunakan free transform tool secara individu atau menggabungkan
beberapa perintah transformasi, misalnya memutar, mengubah dan memiringkan objek atau
distorsi secara bersamaan.
Ada beberapa pilihan opsi dari transform tool, yaitu:
Keterangan:
A. Scale : untuk mengatur ukuran besar/kecil suatu objek.
B. Rotate and Skew : untuk memutar suatu objek.
C. Distort : untuk mengubah gambar sehingga hilang bentuk semula dan
menjadi bentuk lain yang lebih artistik.
D. Envelope : untuk membungkus objek kemudian memodifikasi bentuk
objek dengan cara mengubah-ubah bentuk pembungkusnya.
Latihan:
Perhatikan gambar di bawah ini!
Dari gambar di atas buatlah gambar seperti di bawah ini!
1.
A
D C
B
Macromedia Flash 8 15
2. 3.
Memodifikasi Bentuk
Memodifikasi bentuk, misalnya mengadakan perubahan-perubahan bentuk dari aslinya. Ikon
yang digunakan untuk ini adalah Selection Tool dan Subselection Tool .
Bentuk dasar
Jumlah titik anchor pada suatu gambar dapat ditambah dan dihapus, perintah yang dilakukan
adalah :
Untuk menambah : klik pada salah satu titik anchor untuk menambahkan.
Menghapus : klik titik anchor yang akan dihapus lalu tekan Delete pada keyboard.
Macromedia Flash 8 16
Selain dengan menggunakan Subselection Tool kita juga dapat mengubah bentuk dengan
menggunakan Selection Tool seperti gambar di bawah ini.
Latihan :
Ubahlah gambar di bawah ini menjadi suatu bentuk kursi yang baik!
Menghapus bagian obyek
Untuk menghapus sebagian obyek dapat digunakan ikon eraser tool (E) yang terdapat pada
toolbox. Ada beberapa erase mode yang dapat digunakan.
a. Erase Normal : untuk menghapus semua objek.
b. Erase Fills : untuk menghapus warna dalam objek.
c. Erase Lines : untuk menghapus tepi garis objek.
a
b
c
d
e
Macromedia Flash 8 17
d. Erase Selected Fills: untuk menghapus warna dalam objek yang terpilih.
e. Erase Inside : untuk menghapus area dalam objek.
Latihan:
Membuat gambar di bawah ini!
V. Pengolahan Teks
Sebagai dasar untuk pengolahan teks ada baiknya kita terlebih dahulu memahami panel
properties untuk teks seperti di bawah ini.
Keterangan:
 Character spacing : untuk memberikan jarak antar karakter/huruf.
 Point size : untuk menentukan besar/kecilnya huruf.
 Change direction of text : untuk menentukan tipe bentuk tulisan.
 Alignment : untuk mengatur posisi teks.
 Untuk membuat teks
Teks dapat dibuat dengan menggunakan text tool. Perhatikan contoh di bawah ini!
Ubah menjadi:
Macromedia Flash 8 18
Macromedia Flash 8 19
Buat teks seperti di bawah!
Ubah menjadi bentuk seperti di bawah:
Latihan :
Buat bentuk huruf di bawah ini!
Macromedia Flash 8 20
Pewarnaan dengan Gradasi Warna
Untuk pewarnaan kita hanya akan membahas tentang gradasi warna (gradient).
Untuk mencampur warna dapat dilakukan dengan cara memilih warna RGB. Untuk jenis-jenis
gradient.
A. None adalah tidak memberi warna apapun pada fill.
B. Solid adalah warna padat pada fill, hanya menggunakan satu warna.
C. Linear adalah memberi warna gradasi berbentuk vertical pada fill.
D. Radial adalah memberi efek warna gradasi berbentuk lingkaran pada fill.
E. Bitmap adalah memberi image pada fill.
Untuk memberi warna gradient pada suatu objek dapat dilakukan dengan :
Cara 1:
a. Pilih/buat objek yang akan diwarnai
b. Pilih salah satu pilihan gradient pada panel Color Mixer (cth : Radial)
Cara 2:
a. Pilih salah satu pilihan gradient pada panel Color Mixer (cth : Radial)
b. Memilih ikon fill Paint Bucket tool , kemudian klik pada objek.
Perhatikan gambar di bawah ini.
Macromedia Flash 8 21
Mengedit warna gradient dengan Fill Transform Tool
Caranya :
 pilih ikon Fill Transform Tool
 klik pada objek yang akan diedit
 atur titik handle sesuai keinginan
Gradasi dengan Bitmap
Langkah-langkahnya:
Cara 1:
a. Pilih bitmap pada panel Color Mixer, pilih salah satu gambar bitmap yang diinginkan
b. Buat bidang/objek yang akan diberi isi dengan gambar bitmap
Cara 2:
a. Buat bidang/objek yang akan diberi isi dengan gambar bitmap
b. Pilih bitmap pada panel Color Mixer , pilih salah satu gambar bitmap yang diinginkan
c. memilih ikon fill Paint Bucket tool , kemudian klik pada objek.
Buatlah seperti contoh pada gambar di bawah ini! (gambar bitmap bebas)
Macromedia Flash 8 22
Gunakan Fill Transform Tool untuk mengedit bitmap (isi bidang)
Edit bitmap sesuai keinginan dengan mengatur transformasi (skala, rotasi, skew,…)
Latihan :
1.
2. Buat huruf yang bergerak dan bergelombang
Macromedia Flash 8 23
Kompetensi Dasar:
Menggunakan metoda pembentuk animasi
Indikator:
 Menggunakan metode frame by frame untuk membuat animasi
 Menggunakan metode tweening untuk membuat animasi (motion tween, motion
guide, shape tween)
 Menggunakan layer untuk membentuk animasi
1. Mengenal dan Membuat Macam-macam Animasi
Animasi dapat diartikan sebagai suatu aktifitas perpindahan atau pergerakan suatu objek dari
suatu tempat ke tempat lain. Dalam Flash, istilah animasi ini disebut tweening. Ada
bermacam-macam animasi yang akan dijelaskan dalam modul ini.
Ada dua macam animasi dasar dalam Flash, yaitu:
a. Frame by Frame
b. Tweening
Animasi Frame by Frame : animasi yang dilakukan pada setiap frame dengan memasukkan
keyframe disetiap perubahan yang diinginkan.
Tweening : suatu aktifitas perpindahan/perubahan suatu objek.
1.1 Animasi Frame by Frame
Contoh animasi Frame by Frame:
 Gambar roda dengan menggunakan oval tool dan line tool. Atur ketebalan garis
melalui properties
 Tampilkan grid dengan memberikan perintah View, Show Grid untuk
memudahkan mengatur perubahan dan perpindahan roda. Kemudian klik menu
View, Grid, Snap to Grid agar roda dipindahkan mengikuti grid
Macromedia Flash 8 24
 Masukkan keyframe pada frame 2 (tekan tombol F6). Klik menu Modify,
Transform, Scale and Rotate … Isi Rotate : 45 degrees agar roda berputar 45
derajat. Geser roda ke kanan sebanyak satu grid.
 Ulangi langkah ke-3 untuk frame 3 dan seterusnya sampai roda kelihatan berputar
Proses pergeseran roda
1.2 Tweening
Animasi ini terdiri dari Motion Tweening, Shape Tweening, dan Motion Guide
Tweening.
Animasi Objek Tanpa Jejak (Motion Tweening)
Motion Tweening adalah animasi yang paling utama dan mendasar. Fungsinya untuk
menggerakkan objek dari suatu tempat ke tempat lain. Pada motion tweening ini Anda
juga dapat mengubah ukuran objek dari kecil ke besar atau sebaliknya, juga dapat
membuat objek tidak kelihatan/menghilang atau sebaliknya.
Macromedia Flash 8 25
Contoh :
 Gambar sebuah perahu
 Klik ikon Arrow, seret (drag) gambar perahu ke bagian paling kiri stage.
 Klik kanan mouse pada frame 30, maka akan muncul menu pop-up, pilih Insert
Keyframe (tombol F6)
 Pindahkan perahu ke bagian paling kanan stage. (Perhatikan! Frame aktif adalah
frame 30)
 Klik kanan mouse pada frame 1, pilih Create Motion Tween
 Klik kanan mouse pada frame 30, pilih Create Motion Tween. Motion tweening
ditunjukkan dengan garis panah dari frame 1 menuju frame 30 dan framenya
berwarna ungu.
 Jalankan movie Anda dengan menekan tombol Ctrl + Enter atau melalui menu
Control, Play maka perahu akan bergerak dari kiri stage ke kanan stage.
Animasi objek tanpa jejak (Motion Tweening)
Animasi Perubahan Bentuk Objek (Shape Tweening)
Shape tweening sering juga disebut dengan Efek Morphing, yaitu cara untuk mengubah
atau mengganti suatu objek dengan objek lain. Dalam latihan ini, kita akan mengubah
objek persegi panjang menjadi lingkaran.
Langkah-langkahnya:
Macromedia Flash 8 26
 Pada frame 1 buat gambar persegipanjang
 Klik kanan mouse pada frame 20, pilih Insert Keyframe
 Gambar lingkaran pada frame 20
 Pilih frame 1, pada bagian panel Properties klik pada pilihan Tween dan pilih
Shape. Shape tweening ditunjukkan dengan garis panah dari frame 1 menuju frame
20 dengan warna hijau.
 Jalankan movie Anda
Animasi perubahan bentuk (Shape Tweening)
Latihan :
Buat animasi laut/air berombak
Animasi Objek Mengikuti Jejak/Jalur (Motion Guide Tweening)
Motion Guide Tweening adalah animasi yang mengikuti arah garis atau jalur tertentu
yang dibentuk di layer guide.
Langkah-langkah:
 Klik Selection Tool pada toolbox
 Aktifkan ikon Snap to Objects pada toolbox. Objek tidak akan mengikuti jalur kalau
ikon ini belum diaktifkan
Macromedia Flash 8 27
 Buat lingkaran. Ubah lingkaran menjadi symbol (Insert, Convert to Symbol, pilih
Graphic)
 Buat Keyframe pada frame 30
 Klik menu Insert, Motion Guide untuk membuat layer guide atau klik ikon
pada timeline.
 Pilih frame 1 pada layer guide, buat jalur dengan menggunakan Pencil Tool seperti
pada gambar di bawah ini.
 Pilih frame 1, seret lingkaran agar cincin di tengah lingkaran berada di awal garis
jalur
 Pilih frame 30 pada layer 1, seret lingkaran sampai cincin di tengah lingkaran tepat
berada di akhir garis jalur.
 Pilih frame 1, pada panel properties di bagian Tween pilih Motion. Motion guide
tweening ditunjukkan dengan garis panah dari frame 1 menuju frame 30 dengan
warna ungu.
 Jalankan movie
Latihan :
Buat animasi bumi mengitari matahari pada orbitnya!
Animasi Perubahan Warna Objek (Tint Tweening)
Tint Tweening adalah animasi yang mengubah warna suatu objek atau teks dengan warna lain.
Contoh:
Macromedia Flash 8 28
Ketik teks PESONA EDU iLEARNING dengan ukuran huruf 60, Bold
 Ubah teks tersebut menjadi symbol
 Buat Keyframe pada frame 10 dan 20 (klik kanan pada frame tersebut, pilih Insert
Keyframe)
Jadi ada tiga keyframe, yaitu frame 1, 10 , dan 20.
 Pilih frame 1, pilih Motion pada Tween di panel properties
 Pada frame 1 klik teks lalu tentukan warna teks melalui properties, Color, pilih Tint,
warna biru.
Lakukan hal yang sama pada frame 10 dan 20 dengan warna berbeda.
 Jalankan movie
3.2 Membuat Macam-macam Efek Animasi
3.2.1 Animasi Objek Disertai Efek Stretch
Animasi ini merupakan motion tween dengan efek perubahan ukuran (skala) dari kecil ke
besar atau sebaliknya
Contoh :
 Ketik teks PESONA EDU dengan jenis huruf Times New Roman, 60, Bold
 Ubah teks menjadi symbol (F8)
 Klik kanan pada frame 15, pilih Insert Keyframe. Klik kanan pada teks (symbol),
pilih Free Transform atau klik menu Modify, Transform, Free Transform
Handle
Macromedia Flash 8 29
 Lebarkan teks tersebut dengan menarik handle symbol ke bawah sehingga tinggi teks
menjadi bertambah
 Klik kanan mouse pada frame 1, lalu pilih Copy Frame
 Klik kanan mouse pada frame 30, lalu pilih Paste Frame
 Klik kanan mouse pada frame 1, pilih Create Motion Tween
 Klik kanan mouse pada frame 15, pilih Create Motion Tween
 Jalankan movie
Animasi objek dengan efek Stretch
3.2.2 Animasi Objek Disertai Efek Fade
Animasi ini merupakan motion tween dengan efek pemudaran suatu objek
Contoh :
 Ketik teks (bebas) dengan ukuran huruf 50, bold
 Ubah teks menjadi symbol (F8)
 Klik kanan pada frame 25, pilih Insert Keyframe untuk membuat Keyframe.
 Klik teks (symbol), pada properties, Color Style, pilih Alpha , 0%
 Klik kanan pada frame 50, pilih Insert Keyframe untuk membuat Keyframe.
 Klik teks (symbol), pada panel properties, Color Style, pilih Alpha , 100%
 Jalankan movie
Macromedia Flash 8 30
Animasi dengan efek Fade
3.2.3 Animasi Objek dengan Efek Masking (Spotlight)
Efek masking berfungsi untuk menyembunyikan objek lain dengan menutupi objek
tersebut sehingga yang menutupi terlihat tembus pandang (transparan). Animasi jenis ini
sering digunakan untuk membuat iklan huruf berjalan. Untuk lebih jelas, perhatikan
contoh berikut ini:
Mengatur Ukuran dan Warna Latar Belakang Canvas
 Ubah ukuran kanvas (stage) dengan mengklik menu Modify, Document …
Kotak dialog Document properties
 Ubah nilai width=500, height=70, dan warna latar belakang (background) dengan
warna hitam
 Klik OK
Pembuatan dan Pengaturan Layer
 Klik menu Insert, Layer maka akan muncul layer 2 di atas layer 1 atau klik ikon
pada timeline
 Ubah nama layer 1 menjadi teks dan nama layer 2 menjadi lampu sorot
Macromedia Flash 8 31
Menulis Teks dan Membuat Lingkaran
 Aktifkan layer teks. Pilih frame 1, lalu ketik teks “ ComputerStar Learning Center”
dengan ukuran huruf 36, Bold
 Atur letak tulisan agar berada tepat di tengan kanvas (stage) dengan mengklik menu
Window, Design Panel, Align. Pada panel align, klik tombol To Stage, lalu tombol
Align horizontal center dan Align vertical center.
 Aktifkan layer lampu sorot, pilih frame1, lalu buat lingkaran di sebelah kiri di luar
kanvas
Menulis teks dan membuat lingkaran
Membuat Animasi
 Aktifkan layer lampu sorot, klik kanan pada frame 40, pilih Insert Keyframe. Seret
lingkaran ke sebelah kanan di luar kanvas.
 Aktifkan layer teks. Klik kanan pada frame 40, pilih Insert Keyframe.
 Klik kanan pada layer lampu sorot, pilih Mask
Horizontal
center
vertikal
center
To Stage
Macromedia Flash 8 32
Membuat efek Masking
 Jalankan movie
Catatan:
Bila Anda tidak bisa menganimasikan sebuah obyek maka Anda harus mengubah obyek menjadi symbol
Latihan: Buat animasi bola dunia yang berputar!
Macromedia Flash 8 33
Kompetensi Dasar:
Menggunakan metoda pembentuk animasi
Indikator:
 Menggunakan metode frame by frame untuk membuat animasi
 Menggunakan metode tweening untuk membuat animasi (motion tween, motion
guide, shape tween)
 Menggunakan layer untuk membentuk animasi
o Mengenal layer
o Mengelola layer
Projek:
 Animasi proses reaksi kimia/fisika
 Animasi terbentuknya alam semesta
1 Mengenal Layer
Layer adalah lapisan (lembaran) transparan yang digunakan sebagai tempat untuk
menggambar/menempatkan objek. Jika animasi yang dibuat masih sederhana maka kita bisa
menggunakan satu layer saja, namun untuk animasi yang kompleks kita memerlukan beberapa/
banyak layer. Perhatikan! Layer yang paling atas akan menutup objek layer yang terletak di
bawahnya.
Kegunaan layer adalah:
 Untuk memudahkan dalam menggambar atau mengedit suatu objek tanpa mempengaruhi
objek yang berada pada layer lainnya.
 Untuk dapat menemukan objek dengan cepat dan mudah ketika akan mengedit objek
tersebut
 Dapat membuat banyak objek dengan animasi.
Perhatikan gambar berikut ini!
Padlock
Eye
Outline View
Current Frame Elapse Time
Pencil
Red X
White dot
Center Frame
Frame Rate Indicator
Modify Onion Markers
Edit Multiple Frames
F
Onion Skin Outline
Onion Skin
Macromedia Flash 8 34
Keterangan:
 Pencil : menunjukkan bahwa layer yang dipilih (sedang aktif) dapat digunakan untuk
mengerjakan sesuatu pada layer tersebut
 Eye (Show/Hide All Layers) : menampilkan/menyembunyikan layer
 Padlock (Lock/Unlock All Layers) : mengunci/membuka penguncian layer
 Outline View (Show All Layer as Outline) : menampilkan objek pada semua layer dalam
bentuk outine (hanya kerangka/garis luar objek)
 Red X : menunjukkan bahwa layer tersebut tersembunyi sehingga kita tidak dapat melihat
atau mengedit objek pada layer tersebut
 White dot : menunjukkan bahwa layer tersebut tidak dikunci atau disembunyikan
 Center Frame : menempatkan frame yang dipilih di tengah-tengah timeline
 Union Skin : menampilkan serangkaian objek frame dan animasi secara bersamaan
 Union Skin Outlines : menampilkan kerangka (garis luar objek) dari serangkaian objek dan
animasi secara bersamaan
 Edit Multiple Frames : mengedit tiap frame pada area yang berada pada Onion Skin
 Modify Union Marker : mengatur area penerapan Onion Skin pada timeline
 Current Frame : menunjukkan posisi frame yang sedang aktif
 Frame Rate Indicator : menunjukkan ukuran kecepatan animasi (frame/detik)
 Elapsed Time : menunjukkan waktu yang sudah terlampaui sampai dengan posisi frame yang
aktif pada timeline
2 Mengelola Layer
Membuat Layer Baru
 Klik menu Insert > Layer atau klik ikon Insert Layer pada timeline
Menghapus Layer
 Pilih layer yang akan dihapus
 Klik ikon Delete Layer
Mengubah Nama Layer
 Klik ganda (double-click) pada tulisan Layer 2
 Ketik nama layer sesuai keinginan, misalnya Teks dan akhiri dengan menekan [Enter]
Insert Layer Delete Layer
Macromedia Flash 8 35
Mengubah nama layer
Perhatikan contoh penggunaan layer dalam membuat animasi berikut ini!
 Buka sebuah file baru
 Ubah nama Layer 1 menjadi Teks
 Pada frame 1 tulis teks berikut ini dengan warna hitam dan letakkan pada bagian tengah-
bawah stage
 Buat keyframe pada frame 40
 Pindahkan teks ke bagian atas-tengah stage
 Berikan perintah motion tweening
 Ubah warna background dengan warna hitam, dengan memilih menu Properties >
Background
 Tambahkan satu layer baru dengan mengklik ikon Insert layer
 Ubah nama Layer 2 menjadi lingkaran
 Gambar sebuah lingkaran dengan warna isian putih di tengah stage
 Pindahkan layer lingkaran ke bagian bawah-tengah layer Teks
 Jalankan animasi
 Tampilan movie selengkapnya dapat dilihat di bawah ini!
TUGAS:
Buat animasi pemandangan dengan matahari yang bersinar dan bergerak yang akhirnya
tenggelam di cakrawala dan ikan yang berenang kemudian muncul dan lompat ke permukaan
laut dan berengan lagi. Buat air laut terlihat bening (transparan) sehingga animasi ikan terlihat.
Macromedia Flash 8 36
Kompetensi Dasar:
Menggunakan metoda pembentuk animasi
Indikator:
 Membuat objek symbol (instance)
 Membuat tombol
 Membuat Movie Clip
 Menggunakan Scene untuk membentuk animasi
 Mengenal Scene
 Mengelola Scene
Projek:
 Cerita Animasi
1. Mengenal dan Membuat Symbol
Symbol adalah objek yang dapat digunakan berulang-ulang dan tersimpan di dalam Library
(perpustakaan) Macromedia Flash.
Ada tiga jenis symbol dalam Macromedia Flash, yaitu:
 Movie Clip : jenis simbol untuk membuat objek-objek animasi
 Button : jenis simbol untuk membuat tombol interaktif
 Graphic : jenis simbol untuk membuat objek statis yang siap dianimasikan
1.1. Movie Clip
Digunakan untuk membuat sebuah animasi yang berjalan sendiri pada sebuah scene
sehingga memiliki timeline tersendiri dan pergerakannya tersendiri juga.
Untuk membuat movie clip, ikuti langkah-langkah berikut:
 Klik menu Insert, New Symbol (Ctrl + F8), maka akan muncul kotak dialog:
 Name : diisi dengan nama symbol yang Anda inginkan, misalnya : pesawat
 Klik Ok
 Buatlah/ambil sebuah gambar, misalnya gambar pesawat dengan File, Import,
Import to Stage
 Buatlah animasi untuk menggerakkan objek pesawat dari tepi stage ke tepi kanan
stage dengan menggunakan motion tweening
Macromedia Flash 8 37
Membuat Instance
Symbol Movie Clip yang baru Anda buat sudah tersimpan pada Library. Untuk
menggunkan symbol tersebut Anda dapat mengikuti langkah-langkah berikut ini:
 Pilih/klik jendela Scene 1
 Klik menu Window, Library (F11) maka akan tampil kotak dialog
 Geser (drag) symbol pesawat ke stage. Symbol yang berada pada stage disebut
Instance. Anda dapat melakukan pengeditan terhadap instance, misalnya mengubah
ukuran instane atau memutar instance dengan cara pilih instance, lalu klik menu
Modify, Transform, Scale and Rotate. Anda juga dapat mengubah efek warna pada
instance dengan memilih coraknya melalui properties, Color Style, lalu tentukan
nilai presentase. Dalam latihan ini kita menggunakan efek warna Alpha 40% untuk
instances yang berada di tengah stage.
 Jalankan animasi
Bila Anda ingin membuat symbol dari gambar yang sudah ada maka lakukanlah langkah-
langkah berikut:
 Pilih/blok gambar tersebut
 Klik menu Modify, Convert to Symbol… (F8) maka akan muncuk kotak dialog
Convert to Symbol
 Langkah selanjutnya sama dengan ketika membuat symbol baru
Mengedit Symbol Untuk Mengubah Seluruh Instance
Pada pengeditan sebelumnya, setiap instance diedit satu persatu. Ada cara yang dapat
digunakan untuk mengedit seluruh instance yang berasal dari satu symbol. Untuk itu ikuti
langkah-langkah berikut ini:
 Pilih salah satu instance
 Klik Edit, Edit Symbols (Ctrl + E). semua instances akan hilang dan yang tampil
hanya instance yang dipilih. Keadaan ini disebut modus Symbol Editing
 Ubah arah symbol (pesawat) menjadi seperti gambar berikut ini:
Macromedia Flash 8 38
 Klik Scene 1 untuk kembali ke stage utama. Tampilkan objek pada stage menjadi
seperti berikut ini:
1.2. Button
Digunakan untuk membuat tombol sebagai media interaksi antara pengguna dengan
aplikasi yang dibuat.
Untuk membuat symbol button ikuti langkah-langkah berikut:
 Klik menu Insert, New Symbol (Ctrl + F8) maka akan tampil kotak dialog
berikut:
Macromedia Flash 8 39
 Pada kotak teks Name ubah nama symbol menjadi : Tombol
 Pilih Button pada bagian Type
 Klik Rectangle tool pada toolbox
 Klik ikon Round Rectangle Radius pada toolbox (pada bagian Option)
maka akan tampil kotak dialog berikut;
 Corner Radius diisi sebesar 30 points
 Klik OK
 Gambar sebuah tombol dengan Fill Color berwarna hitam, lalu gunakan Text
Tool untuk menulis teks berwarna putih di atas tombol tersebut.
 Pada Timeline akan terlihat empat buah frame yaitu Up, Over, Down, dan Hit
 Buat keyframe pada frame Over (F6). Pilih teks “Tombolku” dan ubah
warnanya menjadi kuning. Pilih tombolnya saja lalu ubah warnanya menjadi
merah (atau dengan warna gradasi). Lakukan hal yang sama pada frame Down.
Up (putih) Over (kuning) Down (hijau)
 Klik jendela Scene 1 untuk kembali ke movie utama
 Jalankan animasi. Cobalah untuk melewatkan mouse di atas tombol, lalu klik
pada tombol tersebut dan Anda akan melihat perubahan yang menarik pada
tombol tersebut.
 Simpan file dengan nama : Tombolku
Round Rectangle Radius : untuk membentuk sudut tumpul pada segi empat.
Kegunaan/fungsi dari frame-frame pada symbol button:
 Up : adalah kondisi button sepanjang movie, normal dan tidak mengalami
perubahan apa-apa.
 Over : adalah kondisi button bila mouse berada di atasnya, dapat berupa
perubahan warna, suara, dan lain-lain.
Macromedia Flash 8 40
 Down : adalah kondisi dimana user menekan dan melepas mouse pada button,
tidak perlu selalu ada namun, akan sangat manis ditambahkan untuk
lebih menunjukkan interaktivitas.
 Hit : adalah area tersembunyi dari tombol.
1.3. Graphic
Digunakan untuk membuat objek mati/tanpa animasi.
Untuk membuat symbol Graphic ikuti langkah-langkah berikut:
 klik menu Insert, New Symbol (Ctrl + F8) maka akan tampil kotak dialog:
 pada kotak teks Name, ubah nama symbol menjadi Ikan
 pilih Graphic pada bagian Type.
 Gambarlah seekor ikan yang cantik, kreasi Anda sendiri.
Latihan : membuat movie clip
- Buat symbol baru dengan type : Movie clip, beri nama : kumbang
- Buat beberapa layer, untuk menempatkan masing-masing bagian kumbang, yaitu: badan,
kepala, sayap kiri, sayap kanan, sungut kiri, sungut kanan
- Aktifkan layer badan. Buat gambar seperti di bawah ini, beri warna yang berbeda untuk
setiap ruas badan.
- Aktifkan layer kepala, tambahkan kepala
Macromedia Flash 8 41
- Aktifkan layer sayap kanan. Buat sayap, cara yang mudah adalah buat lingkaran dan kotak
dengan kotak membelah lingkaran. Kemudian hapus gambar kotak
- Pindahkan sayap ke badan kumbang
- Duplicate (copy) sayap kanan, aktifkan layer sayap kiri kemudian pilih menu Edit > Paste
in Place
- Kemudian putar agar menjadi model sayap kiri. Sebelumnya pindahkan pusat rotasi ke
tengah, kemudian pilih menu : Modify > Transorm > Flip Horizonatal
- buat sungt kiri dan kanan. Caranya seperti membuat sayap kiri dan kanan
Pusat rotasi
Macromedia Flash 8 42
- klik kanan pada frame 5 (contoh) > Insert Keyframe kemudian rotasi agar sayap kanan dan
kiri seperti di bawah ini. Perhatikan posisi pusat rotasi
- setelah itu atur rotasi sungut
- Klik TAB Scene untuk kembali ke layer utama
Macromedia Flash 8 43
- Klik menu Window > Library
- Pindahkan movie clip kumbang ke stage dengan cara drag and drop gambar kumbang atau
nama movie clip. Dapat ditambahkan guide layer agar kumbang dapat terbang mengikuti
jejak/track.
- Jalankan movie clip
2. Mengenal Scene
Scene merupakan bagian-bagian dari sebuah projek yang berisi kumpulan layer, gambar animasi
maupun tombol, dan pada setiap scene, gambar, animasi objek dan tombol dapat berbeda-beda
sesuai
Sebagai contoh, Anda dapat menggunakan scene terpisah untuk halaman pembukaan (introduksi)
dan isi dari movie (halaman utama). Sebuah scene bisa terdiri dari sebuah layer saja atau bisa
juga terdiri dari banyak layer.
Anda dapat menambahkan, menghapus, menduplikasi, dan mengubah nama scene. Untuk
menghentikan movie pada scene berikutnya, dapat menggunakan action.
2.1. Mengelola Scene
Menampilkan Scene
 Klik menu Window, Design Panels, Scene
Panel Scene
Catatan:
Anda dapat menambahkan suara pada Movie Clip, Button maupun Graphic. File > Import to
Library file suara(sound) kemuddian drag file suara dari library ke layer.
Delete scene
Add scene
Duplicate scene
Macromedia Flash 8 44
Membuat Scene Baru
 Klik tombol (ikon) Add scene
Anda juga bisa menggunakan menu Insert > Scene
Membuat Scene Baru
 Klik tombol (ikon) Add Scene
Menghapus Scene
 Klik tombol (ikon) Delete Scene
Mengubah Nama Scene
 Klik ganda nama scene pada panel scene
 Ketik nama baru sesuai keinginan
TUGAS :
Buat animasi kupu dan kumbang berterbangan di dalam taman bunga.
PROJEK I: Reboisasi
Scene I : animasi tentang keadaan hutan yang hijau dengan burung, kupu-kupu, dan
kumbang yang beterbangan dengan indah.
Scene II : terjadi penebangan hutan
Scene III : terjadi bencana alam banjir karena penebangan hutan
Scene IV : hutan ditanam kembali (dari bibit sampai tumbuh menjadi pohon besar) dan
menjadi hijau kembali.
PROJEK II: proses terjadinya gempa Vulkanik
Macromedia Flash 8 45
Mempublikasikan File
File flash harus dipublikasikan terlebih dahulu sebelum digunakan sesuai keperluan Anda. Untuk
itu ikuti langkah-langkah berikut ini:
 Simpan file Anda dengan klik menu File, Save As… pada folder yang diinginkan lalu
berikan nama file, misal : SitusPribadi (jika digunakan untuk web)
 Klik menu File, Publish Setting… maka akan tampil kotak dialog Publish Setting berikut:
Kegunaan Type di bawah ini:
a. Flash (.swf) : file yang telah dibuat dengan menggunakan Macromedia Flash
dan hanya bisa diijalankan pada komputer yang sudah terinstal
Flash.
b. HTML (.html) : file yang berisi script HTML yang membuat flash movie dapat
ditampilkan di jendela browser.
c. GIF Image (.gif) : file flash yang dipublish menjadi file berextension .gif
d. JPEG Image (.jpg) : file flash yang dipublish menjadi file berextension .jpg.
e. PNG Image (.png) : file dengan format bitmap yang mendukung transparansi (alpha
channel), dan merupakan format file asli dari Adobe Fireworks.
f. Window Projector (.exe) : adalah file yang dapat dijalankan di semua komputer tanpa
harus terinstall Flash.
g. Macintosh Projector : file flash yang akan dipublish menjadi file berextention .exe,
yang menghasilkan aplikasi tertentu berbasis windows.
h. QuickTime (.mov) : file flash yang dirubah menjadi file berextention .mov,
dijalankan seperti movie dan dijalankan pada aplikasi program
Quick Time.
Macromedia Flash 8 46
 Agar lebar dan tinggi movie yang akan ditampilkan pada web browser sesuai dengan ukuran
layar berapa pun maka klik tab HTML, pilih pada bagian Dimension: Percent dan Scale:
Exact fit
 Klik tombol Publish
 Buka Windows Explorer, lalu cari folder tempat Anda menyimpan file flash. Di sana sudah
terdapat tiga file baru
Tiga file baru hasil publikasi
 Klik ganda pada file SitusPribadi.html maka movie flash Anda akan tampil pada browser
web
File berekstensi exe adalah file yang dapat dijalankan pada komputer tanpa harus terinstal Flash.
Tugas:
Buat suatu cerita animasi yang terbagi beberapa Scene:
Macromedia Flash 8 47
Kompetensi Dasar:
Menggunakan ActionScript pembentuk animasi
Indikator:
 Mengidentifikasi ActionScript dasar
 Menggunakan ActionScript dasar pembentuk animasi
Projek:
 Animasi Peta Buta
 Game Sederhana
1. Mengenal ActionScript
ActionScript adalah bahasa pemrograman di flash. ActionScript dapat digunakan untuk
mengontrol objek, membuat navigasi, dan elemen interaktif lain serta membuat movie
flash dan aplikasi web yang interaktif.
Action diperlukan untuk membuat movie atau web Anda terlihat lebih professional,
efisien, dan interaktif. Anda dapat memberikan action pada frame, button, maupun movie
clip.
Secara umum ada 2 macam cara penulisan ActionScript, yaitu:
 Mode Normal : menulis script dengan cara memilih jenis syntax kemudian
menekan nama syntax di action toolbox, maka secara
otomatis kode syntax yang dipilih akan tampil di script pane
dan tidak bisa di edit
 Mode Expert : menulis script dengan mengetikannya langsung pada script
pane, karena pada mode ini script pane menjadi area yang
dapat diedit secara manual
Action dapat dipanggil melalui panel action. Untuk menampilkan panel action klik menu
Window, Development Panels, Action (F9)
Editor ActionScript
Seperti disebutkan di atas, sesuai jenisnya, actionScript dapat ditempatkan pada objek
(tombol/movieclip) dan pada frame.
Cara Penulisan ActionScript
- Klik pada objek (tombol/movieclip) atau pada frame
- pilih menu Window>Action (F9) atau klik pada Action Bar
Macromedia Flash 8 48
Akan muncul layar editor: (mode expert : penulisan actionscript dituliskan sendiri).
Action pada layer 1: frame 1
Action pada tombol dengan nama tombol_1
Action pada movieclip dengan nama lingkaran
Layar editor mode : Script Assist (penulisan actionscript dibantu wizard)
Klik tombol : (untuk berpindah dari mode expert ke wizard atau
sebaliknya)
Macromedia Flash 8 49
Penulisan action, variable, method, dan properties adalah CASE SENSITIVE
(huruf kecil dan besar dibedakan). Penulisan harus tepat huruf besar dan kecilnya
1.1. Action Frame (ActionScript pada Frame)
adalah Actionscript yang diletakkan pada frame atau juga sering disebut FrameScript.
FrameScript ini hanya bisa dilakukan pada keyframe atau blankeyframe. Untuk melihat
frame yang telah diberikan Script terdapat tanda berupa huruf „a‟ kecil yang menandakan
keberadaan sebuah script.
Penulisan ActionScript pada Frame
Bentuk Umum:
Nama_tombol/movieclip/_root.onEvent = function() {
Perintah/statement
……………………
}
Contoh:
lingkaran_mc.onPress=function(){
}
Macromedia Flash 8 50
Praktikkan contoh berikut ini!
 Buat file baru
 Siapkan dua layer, yaitu layer Tombol dan Animasi
 Pada layer Tombol, siapkan dua buah symbol tombol (lihat gambar)
 Pada frame 1 layer Animasi tekan tombol F9 (klik panel Action), pilih +, Global
Functions, timeline Control, stop
 Buat keyfrafme pada frame 2, gambarlah sebuah kotak di bawah tombol-tombol (lihat
gambar)
 Pilih frame 2, beri nama frame pada kotak teks Frame label pada bagian properties.
Nama frame : Kotak
Macromedia Flash 8 51
 Pada frame 19 masukkan keyframe lalu berikan action stop
 Pada frame 20 masukkan keyframe, lalu gambarlah sebuah lingkaran pada tempat
kotak tadi. Nama frame : Lingkaran
 Pada frame 40 masukkan keyframe lalu berikan action stop
 Tambahkan beberapa efek animasi kreasi Anda sendiri sehingga movie Anda menjadi
lebih menarik
 Jalankan movie, klik tombol Kotak lalu tombol Lingkaran
1.2. Action Object
Adalah Actionscript yang terdiri dari kumpulan properties.
Action ini bisa diterapkan pada button, movie clip, atau objek lainnya.
Penulisan ActionScript pada Tombol
Bentuk Umum:
on(Event) {
Perintah/statement
……………………
}
Macromedia Flash 8 52
Contoh :
on (keyPress "<Home>") {
gotoAndPlay(1)
…………………
}
On (Press) {
gotoAndPlay(1)
…………………
}
Penulisan ActionScript pada Movieclip
Bentuk Umum:
onClipEvent(Event) {
perintah/statement
…………………
}
Contoh :
onClipEvent(keyUp) {
if (Key.getCode()==Key.RIGHT) {
…………..
}
}
onClipEvent(keyUp) {
if (Key.getAscii()==39) {
…………..
}
}
onClipEvent(keyUp) {
if (Key.isDown(Key.RIGHT) ){
…………..
}
}
Macromedia Flash 8 53
KOMENTAR
Komentar digunakan untuk memberi keterangan pada penulisan script dan tidak akan
diproses.
Tanda komentar:
// : untuk menandai satu baris perintah
/* */ : untuk menandai blok perintah (diawali dengan /* dan diakhiri */)
Fungsi dari action dan properties di bawah ini :
 Stop : untuk memberhentikan jalannya animasi.
 Play : untuk mulai menjalankan animasi.
 gotoAndPlay : untuk mulai dengan memilih frame.
 gotoAndStop : untuk memberhentikan animasi dengan memilih frame.
Bentuk Umum: gotoAndPlay/gotoAndStop
gotoAndPlay(no.frame/label_frame)
contoh : gotoAndPlay(10)
gotoAndPlay(“awal”)
 _visible : tombol akan terlihat
Bentuk Umum:
Nama_instance._visible= nilai
Ket : nilai : 0/1 (false/true)
Tombol._visible = 1
Tombol._visible = false
Beberapa daftar Method dan Properties:
Method Fungsinya
fscommand Mengirimkan perintah ke browser, flash player, atau proyektor untuk
mengontrol tampilan movie
Contoh:
fscommand(“fullscreen”,”true”) menjadikan layar fullscreen
fscommand(„quit”)  keluar dari flash
goto Memindahkan playhead ke frame/scene tertentu
- gotoAndPlay(scene, no_frame)
- gotoAndStop(scene, no_frame)
- nextFrame
- prevFrame
- nextScene
Macromedia Flash 8 54
Method Fungsinya
- prevScene
loadMovie Menampilkan file swf/image ke dalam level atau movieclip tertentu
loadMovie(folder/nama_file, level/movieclip_target)
play Memainkan movie mulai di posisi playhead
B.U : play()
stop menghentikan movie mulai di posisi playhead
B.U : stop()
Sound Object
Method Fungsi
new Sound(target) Membuat objek suara baru
B.U: nama_variabel = new Sound()
attachSound(id_nama) Memasukkan symbol suara dari library ke dalam movie
getVolume() Mengahasilkan/menampilkan nilai volume suara
setVolume(nilai) Mengatur volume suara
start(detik_awal, loop) Menjalankan/membunyikan suara
Detik_awal : detik awal dimulainya suara
Loop : jumlah pengulangan suara
Stop() Menghentikan suara
Bentuk Umum penulisan properties pada objek:
Nama_movieclip.properties = nilai
Bentuk Umum penulisan method pada objek :
Nama_variabel_suara.method_suara
Key Object
Method Fungsi
getCode() Menjalankan kode tombol
getAscii() Menjalankan kode tombol ASCII
isDown(keycode) Memeriksa apakah tombol tertentu ditekan (biasanya digunakan
bersamaan dengan perintah IF
KEYCODE:
BACKSPACE CAPSLOCK CONTROL DELETEKEY
DOWN END ENTER ESCAPE
HOME INSERT LEFT PGDN
PGUP RIGHT SHIFT SPACE
TAB UP
Macromedia Flash 8 55
Latihan: Membuat Tombol link
Tombol link adalah tombol yang digunakan untuk memanggil alamat/URL lain di internet.
Misalnya ketika tombol diklik maka akan berpindah ke alamat situs atau ke halaman web
tertentu. Di bawah ini akan diberikan contoh membuat tombol link dimana ketika tombol diklik
maka akan berpindah ke halaman baru (file gambarku.swf) yang berisi gambar yang Anda
inginkan (gambar Anda sendiri).
Ikuti langkah-langkah berikut:
 Buat sebuah file baru. Masukkan gambar Anda (bebas) pada stage dengan memilih menu
File, Import, Import to Stage maka akan tampil kotak dialog berikut:
 Pilih gambar yang akan digunakan, klik Open
 Simpan file dengan nama : gambarku.fla
 Jalankan movie (akan terbentuk file gambarku.swf)
 Tutup file gambarku.fla
 Buat file baru, kemudian buat tombol dan beri nama: Tombolku
 Buat kotak dengan menggunakan rectangle tool, dan ubah menjadi movie clip
 Beri nama movie clip dan instance dengan nama frame
 Pilih/blok tombol bertuliskan Tombolku
 Klik menu Window, Development Panel, Action (F9) maka akan tampil Panel Action, klik +,
pilih Action, Browser/Network, getURL
Macromedia Flash 8 56
 Pada kotak teks URL, isi (ketik) nama file gambarku.swf (lengkap dengan ekstensi) atau
langsung mengetikkan actionscript.
Hasilnya akan terlihat seperti di bawah ini
 Jalankan movie, kemudian klik tombol “Tombolku”
Perhatikan hasil tampilannya!
 Ubah script pada tombol dengan menghilangkan frame : loadMovie(“gambarku.swf”)
 Jalankan kembali movie (file Tombolku). Klik tombol “Tombolku”. Perhatikan hasil
tampilannya.
Macromedia Flash 8 57
Tugas:
Keterangan projek PETA BUTA:
- tanda gambar untuk kota, gunung, sungai pada peta dibedakan
- pada saat mouse rollover pada tanda gambar, bagian tersebut menjadi lebih besar dan
muncul namanya dan muncul informasinya
- pada saat diklik muncul informasi mengenai kota/gunung/sungai tersebut
Projek:
Buat website:
 Website Personal/Pribadi
 Penjualan suatu produk
 Website sekolah

More Related Content

What's hot

Presentasi kelas 9D absen 6 bab 1
Presentasi kelas 9D absen 6 bab 1Presentasi kelas 9D absen 6 bab 1
Presentasi kelas 9D absen 6 bab 1andika9d06
 
Modul powerpoint
Modul powerpointModul powerpoint
Modul powerpointbangjin
 
Microsft office power point 2007 bab 1 dan 2
  Microsft office power point 2007 bab 1 dan 2  Microsft office power point 2007 bab 1 dan 2
Microsft office power point 2007 bab 1 dan 2Zahra Rizqi
 
Power point 9D absen 6 bab 3
Power point 9D absen 6 bab 3Power point 9D absen 6 bab 3
Power point 9D absen 6 bab 3andika9d06
 
Power Point 2007
Power Point 2007Power Point 2007
Power Point 2007Ludovikus9G
 
Microsoft Office Power Point 2007 BAB 1 dan 2
  Microsoft Office Power Point 2007 BAB 1 dan 2  Microsoft Office Power Point 2007 BAB 1 dan 2
Microsoft Office Power Point 2007 BAB 1 dan 2IkaAnnisaFA
 
MS PowerPoint 2007 Bab 1-4
MS PowerPoint 2007 Bab 1-4MS PowerPoint 2007 Bab 1-4
MS PowerPoint 2007 Bab 1-4Elsalfym
 
Laporan praktikum modul 4
Laporan praktikum modul 4Laporan praktikum modul 4
Laporan praktikum modul 4Devi Apriansyah
 
BAB 1 2 3 Tugas TIK Kelas 9
BAB 1 2 3 Tugas TIK Kelas 9BAB 1 2 3 Tugas TIK Kelas 9
BAB 1 2 3 Tugas TIK Kelas 9Syauqi Ilmi Ilmi
 
Menu dan Ikon Grafis
Menu dan Ikon GrafisMenu dan Ikon Grafis
Menu dan Ikon GrafisNaveza
 
Presentasi tik bab 1 dan 2
Presentasi tik bab 1 dan 2Presentasi tik bab 1 dan 2
Presentasi tik bab 1 dan 2Muhammad Fuad
 

What's hot (13)

Presentasi kelas 9D absen 6 bab 1
Presentasi kelas 9D absen 6 bab 1Presentasi kelas 9D absen 6 bab 1
Presentasi kelas 9D absen 6 bab 1
 
Modul powerpoint
Modul powerpointModul powerpoint
Modul powerpoint
 
Microsft office power point 2007 bab 1 dan 2
  Microsft office power point 2007 bab 1 dan 2  Microsft office power point 2007 bab 1 dan 2
Microsft office power point 2007 bab 1 dan 2
 
Power point 9D absen 6 bab 3
Power point 9D absen 6 bab 3Power point 9D absen 6 bab 3
Power point 9D absen 6 bab 3
 
Power Point 2007
Power Point 2007Power Point 2007
Power Point 2007
 
Tutorial coreldraw
Tutorial coreldrawTutorial coreldraw
Tutorial coreldraw
 
Microsoft Office Power Point 2007 BAB 1 dan 2
  Microsoft Office Power Point 2007 BAB 1 dan 2  Microsoft Office Power Point 2007 BAB 1 dan 2
Microsoft Office Power Point 2007 BAB 1 dan 2
 
MS PowerPoint 2007 Bab 1-4
MS PowerPoint 2007 Bab 1-4MS PowerPoint 2007 Bab 1-4
MS PowerPoint 2007 Bab 1-4
 
Laporan praktikum modul 4
Laporan praktikum modul 4Laporan praktikum modul 4
Laporan praktikum modul 4
 
BAB 1 2 3 Tugas TIK Kelas 9
BAB 1 2 3 Tugas TIK Kelas 9BAB 1 2 3 Tugas TIK Kelas 9
BAB 1 2 3 Tugas TIK Kelas 9
 
Tik bab 4 kelas 9
Tik bab 4 kelas 9Tik bab 4 kelas 9
Tik bab 4 kelas 9
 
Menu dan Ikon Grafis
Menu dan Ikon GrafisMenu dan Ikon Grafis
Menu dan Ikon Grafis
 
Presentasi tik bab 1 dan 2
Presentasi tik bab 1 dan 2Presentasi tik bab 1 dan 2
Presentasi tik bab 1 dan 2
 

Viewers also liked

Membuat file-presentasi-dengan-flash-mengenal-action-script1
Membuat file-presentasi-dengan-flash-mengenal-action-script1Membuat file-presentasi-dengan-flash-mengenal-action-script1
Membuat file-presentasi-dengan-flash-mengenal-action-script1Nina Safitri
 
Desain grafis dengan macromedia freehand 9
Desain grafis dengan macromedia freehand 9Desain grafis dengan macromedia freehand 9
Desain grafis dengan macromedia freehand 9HerGeous
 
Membuat foto Slideshow dengan Macromedia Flash 8
Membuat foto Slideshow dengan Macromedia Flash 8Membuat foto Slideshow dengan Macromedia Flash 8
Membuat foto Slideshow dengan Macromedia Flash 8Deka M Wildan
 
Seminar kurniawan
Seminar kurniawanSeminar kurniawan
Seminar kurniawanFKIP UHO
 
Spm produksi multimedia 2009
Spm produksi multimedia 2009Spm produksi multimedia 2009
Spm produksi multimedia 2009zhafdiana
 
PASCAL ( MODUL 11)
PASCAL ( MODUL 11)PASCAL ( MODUL 11)
PASCAL ( MODUL 11)Hardini_HD
 
Hortatory expo
Hortatory expoHortatory expo
Hortatory expohendri5
 
Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascriptHaidarNayo
 
Ulead video studio 11 new
Ulead video studio 11 newUlead video studio 11 new
Ulead video studio 11 newalsaadi2012
 
Membuat animasi motion shape dengan Macromedia Flash 8
Membuat animasi motion shape dengan Macromedia Flash 8Membuat animasi motion shape dengan Macromedia Flash 8
Membuat animasi motion shape dengan Macromedia Flash 8widiati nur
 
PHP & MySQL Basic
PHP & MySQL BasicPHP & MySQL Basic
PHP & MySQL Basichakimbks
 
Bab 2(macromedia flash 8)
Bab 2(macromedia flash 8)Bab 2(macromedia flash 8)
Bab 2(macromedia flash 8)sintasintasinta
 

Viewers also liked (20)

MATERI_ULEAD_XI
MATERI_ULEAD_XIMATERI_ULEAD_XI
MATERI_ULEAD_XI
 
MATERI_DELPHI_XI
MATERI_DELPHI_XIMATERI_DELPHI_XI
MATERI_DELPHI_XI
 
Membuat file-presentasi-dengan-flash-mengenal-action-script1
Membuat file-presentasi-dengan-flash-mengenal-action-script1Membuat file-presentasi-dengan-flash-mengenal-action-script1
Membuat file-presentasi-dengan-flash-mengenal-action-script1
 
MODUL_PHP_TIK_XII
MODUL_PHP_TIK_XIIMODUL_PHP_TIK_XII
MODUL_PHP_TIK_XII
 
MODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XIIMODUL_DREAMWEAVER_TIK_XII
MODUL_DREAMWEAVER_TIK_XII
 
Produktif mm20910
Produktif mm20910Produktif mm20910
Produktif mm20910
 
Desain grafis dengan macromedia freehand 9
Desain grafis dengan macromedia freehand 9Desain grafis dengan macromedia freehand 9
Desain grafis dengan macromedia freehand 9
 
Membuat foto Slideshow dengan Macromedia Flash 8
Membuat foto Slideshow dengan Macromedia Flash 8Membuat foto Slideshow dengan Macromedia Flash 8
Membuat foto Slideshow dengan Macromedia Flash 8
 
Seminar kurniawan
Seminar kurniawanSeminar kurniawan
Seminar kurniawan
 
Spm produksi multimedia 2009
Spm produksi multimedia 2009Spm produksi multimedia 2009
Spm produksi multimedia 2009
 
Kilat 1
Kilat 1Kilat 1
Kilat 1
 
PASCAL ( MODUL 11)
PASCAL ( MODUL 11)PASCAL ( MODUL 11)
PASCAL ( MODUL 11)
 
Hortatory expo
Hortatory expoHortatory expo
Hortatory expo
 
Dasar-dasar javascript
Dasar-dasar javascriptDasar-dasar javascript
Dasar-dasar javascript
 
MODUL_HTML_TIK_XII
MODUL_HTML_TIK_XIIMODUL_HTML_TIK_XII
MODUL_HTML_TIK_XII
 
Ulead video studio 11 new
Ulead video studio 11 newUlead video studio 11 new
Ulead video studio 11 new
 
Modul delphi-7
Modul delphi-7Modul delphi-7
Modul delphi-7
 
Membuat animasi motion shape dengan Macromedia Flash 8
Membuat animasi motion shape dengan Macromedia Flash 8Membuat animasi motion shape dengan Macromedia Flash 8
Membuat animasi motion shape dengan Macromedia Flash 8
 
PHP & MySQL Basic
PHP & MySQL BasicPHP & MySQL Basic
PHP & MySQL Basic
 
Bab 2(macromedia flash 8)
Bab 2(macromedia flash 8)Bab 2(macromedia flash 8)
Bab 2(macromedia flash 8)
 

Similar to MATERI_FLASH_XI

Pengenalan Dasar-Dasar Photoshop - dewifitriyani__
Pengenalan Dasar-Dasar Photoshop - dewifitriyani__Pengenalan Dasar-Dasar Photoshop - dewifitriyani__
Pengenalan Dasar-Dasar Photoshop - dewifitriyani__Dewi Fitriyani
 
Memulaicoreldraw
MemulaicoreldrawMemulaicoreldraw
MemulaicoreldrawelfiSahara2
 
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...imamsuryanto22
 
Mengenal adobe photoshop
Mengenal adobe photoshopMengenal adobe photoshop
Mengenal adobe photoshopJadi Apa
 
Panduan coreldraw
Panduan coreldrawPanduan coreldraw
Panduan coreldrawTrianz King
 
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)Modulpraktikumdesaingrafis 110805031502-phpapp01(1)
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)farizky berian
 
Makalah Design Grafis
Makalah Design Grafis Makalah Design Grafis
Makalah Design Grafis agusdeta
 
Modul praktikum corel draw
Modul praktikum corel drawModul praktikum corel draw
Modul praktikum corel drawhairul anwar
 
Modul desain grafis
Modul desain grafisModul desain grafis
Modul desain grafisopik26
 
Bab v-macromedia-flash-8
Bab v-macromedia-flash-8Bab v-macromedia-flash-8
Bab v-macromedia-flash-8Zuhdan Kamal
 
Adobe illustrator
Adobe illustratorAdobe illustrator
Adobe illustratorDimas Lutfi
 
MODUL_CORELDRAW.pdf
MODUL_CORELDRAW.pdfMODUL_CORELDRAW.pdf
MODUL_CORELDRAW.pdfyopi44
 
Modul coreldraw 11
Modul coreldraw 11Modul coreldraw 11
Modul coreldraw 11bangjin
 
Modul Corel Draw
Modul Corel DrawModul Corel Draw
Modul Corel Drawedybluesy
 
Materi Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxMateri Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxHendrawanSetya
 
Materi Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxMateri Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxM. AINUR ROFIQ
 
MODUL COREL DRAW
MODUL COREL DRAWMODUL COREL DRAW
MODUL COREL DRAWAry Efendi
 

Similar to MATERI_FLASH_XI (20)

Pengenalan Dasar-Dasar Photoshop - dewifitriyani__
Pengenalan Dasar-Dasar Photoshop - dewifitriyani__Pengenalan Dasar-Dasar Photoshop - dewifitriyani__
Pengenalan Dasar-Dasar Photoshop - dewifitriyani__
 
Adobe photoshop-7
Adobe photoshop-7Adobe photoshop-7
Adobe photoshop-7
 
Memulaicoreldraw
MemulaicoreldrawMemulaicoreldraw
Memulaicoreldraw
 
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...
Paparan Abdurrahman Naufal Overview Photoshop serta Pengaplikasiannya Dalam D...
 
Mengenal adobe photoshop
Mengenal adobe photoshopMengenal adobe photoshop
Mengenal adobe photoshop
 
Panduan coreldraw
Panduan coreldrawPanduan coreldraw
Panduan coreldraw
 
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)Modulpraktikumdesaingrafis 110805031502-phpapp01(1)
Modulpraktikumdesaingrafis 110805031502-phpapp01(1)
 
Makalah Design Grafis
Makalah Design Grafis Makalah Design Grafis
Makalah Design Grafis
 
Modul praktikum corel draw
Modul praktikum corel drawModul praktikum corel draw
Modul praktikum corel draw
 
Modul desain grafis
Modul desain grafisModul desain grafis
Modul desain grafis
 
Animasi 2D
Animasi 2DAnimasi 2D
Animasi 2D
 
Bab v-macromedia-flash-8
Bab v-macromedia-flash-8Bab v-macromedia-flash-8
Bab v-macromedia-flash-8
 
Adobe illustrator
Adobe illustratorAdobe illustrator
Adobe illustrator
 
MODUL_CORELDRAW.pdf
MODUL_CORELDRAW.pdfMODUL_CORELDRAW.pdf
MODUL_CORELDRAW.pdf
 
Modul coreldraw 11
Modul coreldraw 11Modul coreldraw 11
Modul coreldraw 11
 
Modul Corel Draw
Modul Corel DrawModul Corel Draw
Modul Corel Draw
 
Materi Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxMateri Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptx
 
Modul corel
Modul corelModul corel
Modul corel
 
Materi Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptxMateri Teknik Dasar Photoshop.pptx
Materi Teknik Dasar Photoshop.pptx
 
MODUL COREL DRAW
MODUL COREL DRAWMODUL COREL DRAW
MODUL COREL DRAW
 

Recently uploaded

Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggeraksupriadi611
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfbibizaenab
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfSitiJulaeha820399
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...Kanaidi ken
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfCandraMegawati
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..ikayogakinasih12
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfirwanabidin08
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Abdiera
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxsdn3jatiblora
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxmawan5982
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxawaldarmawan3
 
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdfsdn3jatiblora
 
442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptxHendryJulistiyanto
 

Recently uploaded (20)

Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggerak
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdfBab 6 Kreatif Mengungap Rasa dan Realitas.pdf
Bab 6 Kreatif Mengungap Rasa dan Realitas.pdf
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
PELAKSANAAN + Link2 Materi Pelatihan "Teknik Perhitungan & Verifikasi TKDN & ...
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
 
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
AKSI NYATA NARKOBA ATAU OBAT TERLARANG..
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
Modul Ajar Biologi Kelas 11 Fase F Kurikulum Merdeka [abdiera.com]
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptx
 
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docxTugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
Tugas 1 pembaruan dlm pembelajaran jawaban tugas tuton 1.docx
 
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptxKONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
KONSEP KEBUTUHAN AKTIVITAS DAN LATIHAN.pptx
 
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf2 KISI-KISI Ujian Sekolah Dasar  mata pelajaranPPKn 2024.pdf
2 KISI-KISI Ujian Sekolah Dasar mata pelajaranPPKn 2024.pdf
 
442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx442539315-ppt-modul-6-pend-seni-pptx.pptx
442539315-ppt-modul-6-pend-seni-pptx.pptx
 

MATERI_FLASH_XI

  • 1. Macromedia Flash 8 1 LKS 1 Kompetensi Dasar: Mengidentifikasi fungsi menu dan ikon pada perangkat lunak pengolah animasi Indikator:  Mengidentifikasi program animasi  Mengidentifikasi tampilan/layar kerja aplikasi animasi  Mengidentifikasi fungsi menu dan ikon pada aplikasi animasi 1. Mengenal Layar Kerja Perhatikan tampilan layar kerja Macromedia Flash di bawah ini! Keterangan gambar: 1. Menu bar : kumpulan instruksi-instruksi atau perintah yang digunakan dalam Flash. 2. Color Window : untuk mengatur warna pada objek yang telah dibuat. 3. Library : kumpulan langkah-langkah dalam flash. 4. ToolBox : alat-alat yang digunakan untuk menggambar objek pada stage. 5. Stage : tempat area kerja dalam membuat sebuah animasi. 6. Timeline : mengatur dan mengontrol objek yang dibuat dalam stage 87 5 4 3 216910
  • 2. Macromedia Flash 8 2 untuk dibuat animasinya. 7. Properties : untuk mengatur properti dari objek yang dibuat. 8. Scrollbar : untuk menggeser posisi stage. 9. Layer : tempat untuk meletakkan sebuah objek. 10. Judul : untuk memberikan nama pada stage yang akan kita buat. 2. Dasar-dasar untuk menggambar Toolbox Terbagi atas tiga bagian  Tools untuk menggambar Nama ikon dan kegunaannya : a. Sub selecetion tool : untuk memilih titik-titik pada suatu objek (merubah objek). b. Fiil Transform tool : untuk pengaturan warna terang dan gelap pada objek. c. Lasso tool : untuk memilih daerah objek yang akan di edit. d. Text tool : untuk membuat teks. e. Rectangel tool : untuk menggambar sebuah segi empat. f. Brush tool : untuk menggambar objek dengan menggunakan kuas. g. Paint Bucket tool : untuk menambah, memberi, mengubah warna pada bidang objek yang akan dibuat. h. Eraser tool : untuk menghapus area yang tidak diinginkan dari suatu objek. i. Arrow tool : untuk memilih atau memindahkan suatu objek. j. Free Transform tool : untuk memutar (rotate) objek/mengubah bentuk objek menjadi bentuk lain. k. Line tool : untuk membuat sebuah garis. l. Pen tool : untuk menggambar dan merubah bentuk suatu objek dengan menggunakan edit points. m. Oval tool : untuk menggambar sebuah elips atau lingkaran. n. Pencil tool : untuk menggambar sebuah objek/garis-garis bebas seperti i j k l m n o p b a c d e f g h
  • 3. Macromedia Flash 8 3 menggunakan pensil biasa. o. Ink Bottle tool : untuk menambah, memberi dan mengubah warna pada garis di pinggir suatu objek (stroke). p. Dodge tool : untuk mengidentifikasikan warna dalam suatu objek.  Tools untuk tampilan stage a. Hand tool untuk menggerakkan suatu tampilan objek tanpa merubah posisi objek b. Zoom tool untuk memperbesar/memperkecil tampilan objek  Tools untuk memberi warna a. Stroke color : untuk memberikan warna pada garis/border objek. b. Fill color : untuk memberikan warna pada objek. c. Swap color: : untuk menukar warna objek(fill color) dengan warna border/garis (stroke color). d. Black & white : untuk memberi warna objek dan warna border/garis dengan warna hitam putih. 3. Membuat dan Menyimpan Dokumen Baru A. Membuat Dokumen A.1. Membuat dokumen dengan Flash Document Untuk membuat dokumen dapat dilakukan dengan memilih menu File > New Template, atau dengan menggunakan shortcut-key Alt F + N a b a b cd
  • 4. Macromedia Flash 8 4  Mengubah property document Untuk mengubah property document dapat dilakukan melalui menu Modify > Document, akan muncul tampilan kotak dialog di bawah ini: Width : untuk menentukan lebar area dokumen. Height : untuk menentukan tinggi area dokumen. Background Color : untuk menentukan warna background dokumen. Frame rate berfungsi : untuk menentukan jumlah frame yang digunakan. Ruler units : untuk menentukan type ukuran yang akan digunakan. Contoh latihan :  Ubah properties document dengan: Width : 300, Height : 200, Background Color : hitam  Tambahkan teks pada stage : PESONA EDU iLEARNING (dengan warna merah)
  • 5. Macromedia Flash 8 5 A.2. Membuat dokumen melalui Template Selain membuat dokumen dengan blank document, kita juga dapat membuat dokumen dengan template. Caranya pilih menu File > New Template maka akan muncul kotak dialog di bawah ini: Pada list Category kita dapat memilih jenis dokumen yang akan dibuat, sedangkan Templates untuk menentukan bentuk yang akan dibuat. Contoh: Buat template sesuai gambar di bawah ini! B. Menyimpan Dokumen Simpan file dokumen Perhatikan file yang telah terbentuk mempunyai ekstensi .fla. Ketik nama file dan klik tombol Save.
  • 6. Macromedia Flash 8 6 4. Menggambar dan Memodifikasi Gambar Untuk membuat gambar yang baik, kita terlebih dahulu harus memahami konsep-konsep menggambar dengan flash, misalnya konsep gambar saling berpotongan dan mengecat gambar. Menggambar Obyek Garis Obyek garis dapat digambar dengan menggunakan:  Line Tool Latihan : Buatlah gambar seperti di bawah ini! Untuk memilih bentuk garis yang dibuat, atur pilihan pada panel properties seperti gambar di bawah ini: 1 2 3 4 1. Stroke color : untuk memberikan warna pada garis. 2. Stroke height : untuk menentukan ketebalan garis. 3. Stroke style : untuk menentukan tipe garis. 4. Fill color : untuk memberikan warna dalam pada objek.  Pencil Tool (Y) Untuk merapikan gambar garis dengan pencil tool dapat dilakukan dengan modifier tool
  • 7. Macromedia Flash 8 7 Ada tiga jenis pencil mode, yaitu: a. Straighten b. Smooth c. Ink Langkah-langkah menggunakan pencil tool  Klik pencil tool pada toolbox, kemudian pilih mode pencil tool, dalam hal ini pilih straighten kemudian gerakkan pencil pada stage.  Gambar a menggunakan mode straighten  Gambar b menggunakan mode smooth  Gambar c menggunakan mode ink  Ubah masing-masing gambar dengan warna dan ketebalan berbeda melalui panel properties!  Pen Tool (P) Untuk membuat garis lurus atau segmen-segmen garis kurva secara tepat dapat menggunakan pen tool (p) Langkah-langkahnya:  Klik pen tool  Pilih warna, tebal garis, dan jenis garis pada panel properties  Gambarkan garis pada stage a b c
  • 8. Macromedia Flash 8 8 Contoh gambar: Latihan : Gambarlah bentuk di bawah ini!  Brush Tool (B) Untuk membuat garis dengan efek-efek tertentu seperti sapuan kuas digunakan brush tool Langkah-langkahnya:  Klik ikon brush tool  Atur properties  Pilih ukuran kuas Bahkan kita juga bisa gunakan untuk menulis teks, misalnya di bawah ini:
  • 9. Macromedia Flash 8 9 Menggambar Bentuk Kotak Untuk menggambar bentuk kotak atau sejenisnya dapat digunakan ikon rectangle tool ( R). Gambarlah bentuk di bawah ini! Latihan : gambarlah bentuk di bawah ini Menggambar Ellips dan Lingkaran Untuk menggambar ellips dan lingkaran digunakan ikon Oval Tool pada toolbox. Gambarlah bentuk di bawah ini! Untuk mengatur bentuk sudut-sudutnya digunakan ikon Free Transform tool yang terdapat pada tool properties.
  • 10. Macromedia Flash 8 10 Kompetensi Dasar: Menggunakan tools pada perangkat lunak pengolah animasi Indikator:  Menggunakan menu dan ikon untuk membuat objek/gambar  Menggunakan menu dan ikon untuk melakukan seleksi  Menggunakan menu, ikon, dan panel untuk mengedit objek/gambar I. Memilih Objek Memilih objek sama artinya dengan memblok objek atau sebagian objek tertentu. Jadi untuk memodifikasi objek maka diperlukan cara untuk memilih objek tersebut. Berikut contoh beberapa objek terbentuk: Unselected original shape Stroke selected Fill selected Stroke and fill selected Group selected
  • 11. Macromedia Flash 8 11 Ada beberapa metode untuk memilih objek:  Memilih objek dengan Arrow Tool - memilih garis tepi objek (Stroke selected) klik 1x pada bagian tepi objek - memilih bidang objek (Fill selected) klik 1x pada bidang objek - memilih suatu objek/instance (Stroke and fill selected) klik ganda (double-click) pada objek, akan terlihat seluruh objek terseleksi (garis tepi dan bidang objek) - memilih beberapa objek Untuk memilih beberapa objek dapat dilakukan dengan cara Shift + klik objek atau blok objek dengan membentuk suatu segiempat di sekeliling objek.  Memilih objek dengan Lasso Tool Lasso tool digunakan apabila daerah yang akan dipilih tidak mempunyai bentuk teratur. Misalnya kita ingin memblok gambar buahnya saja seperti terlihat pada gambar di bawah ini
  • 12. Macromedia Flash 8 12 II. Memindahkan Objek Untuk memindahkan objek, kita dapat lakukan dengan cara:  Dengan men-drag objek Caranya : a. pilih selection tool b. klik pada objek yang akan dipindahkan, tekan mouse kemudian pindahkan objek ke posisi yang baru untuk memindahkan sekaligus menyalin objek gunakan Alt-drag untuk memindahkan objek 450 atau kelipatannya gunakan Shift-drag  Menggunakan tombol panah pada keyboard a. pilih objek yang akan dipindahkan dengan b. pindahkan objek dengan menggunakan tombol panah pada keyboard (pergerakan 1 pixel), gunakan Shift + tombol panah untuk pergerakan 10 pixel  Mengubah properties window a. pilih objek yang akan dipindahkan dengan b. ubah nilai x dan y pada window properties  Menggunakan panel info a. pilih objek yang akan dipindahkan dengan b. masukkan nilai x dan y untuk menentukan posisi objek (posisi kiri-atas objek) pada panel info  Memindahkan/menyalin objek a. pilih objek yang akan dipindahkan dengan b. pilih menu Edit, Cut atau Edit, Copy c. tentukan layer, scene, atau file untuk menempatkan objek hasil d. pilih menu Edit, Paste  objek hasil akan ditempatkan pada posisi tengah stage pilih menu Edit, Paste in Place  objek hasil ditempatkan pada posisi yang sama sesuai dengan posisi objek asal
  • 13. Macromedia Flash 8 13 Latihan: Dari cara-cara di atas buatlah gambar seperti di bawah ini! III.Menggrup dan memecah objek Untuk memodifikasi beberapa elemen dapat dilakukan dengan cara menggrup elemen- elemennya. Perhatikan gambar di bawah ini! Perintah untuk menggrup adalah : Modify > Group Dari gambar di atas jadikanlah menjadi gambar di bawah ini dengan warna bunga yang berwarna-warni! Gambar yang terdiri dari beberapa elemen Gambar setelah digrup
  • 14. Macromedia Flash 8 14 IV.Transformasi dan copy objek Transformasi dengan menggunakan free transform tool secara individu atau menggabungkan beberapa perintah transformasi, misalnya memutar, mengubah dan memiringkan objek atau distorsi secara bersamaan. Ada beberapa pilihan opsi dari transform tool, yaitu: Keterangan: A. Scale : untuk mengatur ukuran besar/kecil suatu objek. B. Rotate and Skew : untuk memutar suatu objek. C. Distort : untuk mengubah gambar sehingga hilang bentuk semula dan menjadi bentuk lain yang lebih artistik. D. Envelope : untuk membungkus objek kemudian memodifikasi bentuk objek dengan cara mengubah-ubah bentuk pembungkusnya. Latihan: Perhatikan gambar di bawah ini! Dari gambar di atas buatlah gambar seperti di bawah ini! 1. A D C B
  • 15. Macromedia Flash 8 15 2. 3. Memodifikasi Bentuk Memodifikasi bentuk, misalnya mengadakan perubahan-perubahan bentuk dari aslinya. Ikon yang digunakan untuk ini adalah Selection Tool dan Subselection Tool . Bentuk dasar Jumlah titik anchor pada suatu gambar dapat ditambah dan dihapus, perintah yang dilakukan adalah : Untuk menambah : klik pada salah satu titik anchor untuk menambahkan. Menghapus : klik titik anchor yang akan dihapus lalu tekan Delete pada keyboard.
  • 16. Macromedia Flash 8 16 Selain dengan menggunakan Subselection Tool kita juga dapat mengubah bentuk dengan menggunakan Selection Tool seperti gambar di bawah ini. Latihan : Ubahlah gambar di bawah ini menjadi suatu bentuk kursi yang baik! Menghapus bagian obyek Untuk menghapus sebagian obyek dapat digunakan ikon eraser tool (E) yang terdapat pada toolbox. Ada beberapa erase mode yang dapat digunakan. a. Erase Normal : untuk menghapus semua objek. b. Erase Fills : untuk menghapus warna dalam objek. c. Erase Lines : untuk menghapus tepi garis objek. a b c d e
  • 17. Macromedia Flash 8 17 d. Erase Selected Fills: untuk menghapus warna dalam objek yang terpilih. e. Erase Inside : untuk menghapus area dalam objek. Latihan: Membuat gambar di bawah ini! V. Pengolahan Teks Sebagai dasar untuk pengolahan teks ada baiknya kita terlebih dahulu memahami panel properties untuk teks seperti di bawah ini. Keterangan:  Character spacing : untuk memberikan jarak antar karakter/huruf.  Point size : untuk menentukan besar/kecilnya huruf.  Change direction of text : untuk menentukan tipe bentuk tulisan.  Alignment : untuk mengatur posisi teks.  Untuk membuat teks Teks dapat dibuat dengan menggunakan text tool. Perhatikan contoh di bawah ini! Ubah menjadi:
  • 19. Macromedia Flash 8 19 Buat teks seperti di bawah! Ubah menjadi bentuk seperti di bawah: Latihan : Buat bentuk huruf di bawah ini!
  • 20. Macromedia Flash 8 20 Pewarnaan dengan Gradasi Warna Untuk pewarnaan kita hanya akan membahas tentang gradasi warna (gradient). Untuk mencampur warna dapat dilakukan dengan cara memilih warna RGB. Untuk jenis-jenis gradient. A. None adalah tidak memberi warna apapun pada fill. B. Solid adalah warna padat pada fill, hanya menggunakan satu warna. C. Linear adalah memberi warna gradasi berbentuk vertical pada fill. D. Radial adalah memberi efek warna gradasi berbentuk lingkaran pada fill. E. Bitmap adalah memberi image pada fill. Untuk memberi warna gradient pada suatu objek dapat dilakukan dengan : Cara 1: a. Pilih/buat objek yang akan diwarnai b. Pilih salah satu pilihan gradient pada panel Color Mixer (cth : Radial) Cara 2: a. Pilih salah satu pilihan gradient pada panel Color Mixer (cth : Radial) b. Memilih ikon fill Paint Bucket tool , kemudian klik pada objek. Perhatikan gambar di bawah ini.
  • 21. Macromedia Flash 8 21 Mengedit warna gradient dengan Fill Transform Tool Caranya :  pilih ikon Fill Transform Tool  klik pada objek yang akan diedit  atur titik handle sesuai keinginan Gradasi dengan Bitmap Langkah-langkahnya: Cara 1: a. Pilih bitmap pada panel Color Mixer, pilih salah satu gambar bitmap yang diinginkan b. Buat bidang/objek yang akan diberi isi dengan gambar bitmap Cara 2: a. Buat bidang/objek yang akan diberi isi dengan gambar bitmap b. Pilih bitmap pada panel Color Mixer , pilih salah satu gambar bitmap yang diinginkan c. memilih ikon fill Paint Bucket tool , kemudian klik pada objek. Buatlah seperti contoh pada gambar di bawah ini! (gambar bitmap bebas)
  • 22. Macromedia Flash 8 22 Gunakan Fill Transform Tool untuk mengedit bitmap (isi bidang) Edit bitmap sesuai keinginan dengan mengatur transformasi (skala, rotasi, skew,…) Latihan : 1. 2. Buat huruf yang bergerak dan bergelombang
  • 23. Macromedia Flash 8 23 Kompetensi Dasar: Menggunakan metoda pembentuk animasi Indikator:  Menggunakan metode frame by frame untuk membuat animasi  Menggunakan metode tweening untuk membuat animasi (motion tween, motion guide, shape tween)  Menggunakan layer untuk membentuk animasi 1. Mengenal dan Membuat Macam-macam Animasi Animasi dapat diartikan sebagai suatu aktifitas perpindahan atau pergerakan suatu objek dari suatu tempat ke tempat lain. Dalam Flash, istilah animasi ini disebut tweening. Ada bermacam-macam animasi yang akan dijelaskan dalam modul ini. Ada dua macam animasi dasar dalam Flash, yaitu: a. Frame by Frame b. Tweening Animasi Frame by Frame : animasi yang dilakukan pada setiap frame dengan memasukkan keyframe disetiap perubahan yang diinginkan. Tweening : suatu aktifitas perpindahan/perubahan suatu objek. 1.1 Animasi Frame by Frame Contoh animasi Frame by Frame:  Gambar roda dengan menggunakan oval tool dan line tool. Atur ketebalan garis melalui properties  Tampilkan grid dengan memberikan perintah View, Show Grid untuk memudahkan mengatur perubahan dan perpindahan roda. Kemudian klik menu View, Grid, Snap to Grid agar roda dipindahkan mengikuti grid
  • 24. Macromedia Flash 8 24  Masukkan keyframe pada frame 2 (tekan tombol F6). Klik menu Modify, Transform, Scale and Rotate … Isi Rotate : 45 degrees agar roda berputar 45 derajat. Geser roda ke kanan sebanyak satu grid.  Ulangi langkah ke-3 untuk frame 3 dan seterusnya sampai roda kelihatan berputar Proses pergeseran roda 1.2 Tweening Animasi ini terdiri dari Motion Tweening, Shape Tweening, dan Motion Guide Tweening. Animasi Objek Tanpa Jejak (Motion Tweening) Motion Tweening adalah animasi yang paling utama dan mendasar. Fungsinya untuk menggerakkan objek dari suatu tempat ke tempat lain. Pada motion tweening ini Anda juga dapat mengubah ukuran objek dari kecil ke besar atau sebaliknya, juga dapat membuat objek tidak kelihatan/menghilang atau sebaliknya.
  • 25. Macromedia Flash 8 25 Contoh :  Gambar sebuah perahu  Klik ikon Arrow, seret (drag) gambar perahu ke bagian paling kiri stage.  Klik kanan mouse pada frame 30, maka akan muncul menu pop-up, pilih Insert Keyframe (tombol F6)  Pindahkan perahu ke bagian paling kanan stage. (Perhatikan! Frame aktif adalah frame 30)  Klik kanan mouse pada frame 1, pilih Create Motion Tween  Klik kanan mouse pada frame 30, pilih Create Motion Tween. Motion tweening ditunjukkan dengan garis panah dari frame 1 menuju frame 30 dan framenya berwarna ungu.  Jalankan movie Anda dengan menekan tombol Ctrl + Enter atau melalui menu Control, Play maka perahu akan bergerak dari kiri stage ke kanan stage. Animasi objek tanpa jejak (Motion Tweening) Animasi Perubahan Bentuk Objek (Shape Tweening) Shape tweening sering juga disebut dengan Efek Morphing, yaitu cara untuk mengubah atau mengganti suatu objek dengan objek lain. Dalam latihan ini, kita akan mengubah objek persegi panjang menjadi lingkaran. Langkah-langkahnya:
  • 26. Macromedia Flash 8 26  Pada frame 1 buat gambar persegipanjang  Klik kanan mouse pada frame 20, pilih Insert Keyframe  Gambar lingkaran pada frame 20  Pilih frame 1, pada bagian panel Properties klik pada pilihan Tween dan pilih Shape. Shape tweening ditunjukkan dengan garis panah dari frame 1 menuju frame 20 dengan warna hijau.  Jalankan movie Anda Animasi perubahan bentuk (Shape Tweening) Latihan : Buat animasi laut/air berombak Animasi Objek Mengikuti Jejak/Jalur (Motion Guide Tweening) Motion Guide Tweening adalah animasi yang mengikuti arah garis atau jalur tertentu yang dibentuk di layer guide. Langkah-langkah:  Klik Selection Tool pada toolbox  Aktifkan ikon Snap to Objects pada toolbox. Objek tidak akan mengikuti jalur kalau ikon ini belum diaktifkan
  • 27. Macromedia Flash 8 27  Buat lingkaran. Ubah lingkaran menjadi symbol (Insert, Convert to Symbol, pilih Graphic)  Buat Keyframe pada frame 30  Klik menu Insert, Motion Guide untuk membuat layer guide atau klik ikon pada timeline.  Pilih frame 1 pada layer guide, buat jalur dengan menggunakan Pencil Tool seperti pada gambar di bawah ini.  Pilih frame 1, seret lingkaran agar cincin di tengah lingkaran berada di awal garis jalur  Pilih frame 30 pada layer 1, seret lingkaran sampai cincin di tengah lingkaran tepat berada di akhir garis jalur.  Pilih frame 1, pada panel properties di bagian Tween pilih Motion. Motion guide tweening ditunjukkan dengan garis panah dari frame 1 menuju frame 30 dengan warna ungu.  Jalankan movie Latihan : Buat animasi bumi mengitari matahari pada orbitnya! Animasi Perubahan Warna Objek (Tint Tweening) Tint Tweening adalah animasi yang mengubah warna suatu objek atau teks dengan warna lain. Contoh:
  • 28. Macromedia Flash 8 28 Ketik teks PESONA EDU iLEARNING dengan ukuran huruf 60, Bold  Ubah teks tersebut menjadi symbol  Buat Keyframe pada frame 10 dan 20 (klik kanan pada frame tersebut, pilih Insert Keyframe) Jadi ada tiga keyframe, yaitu frame 1, 10 , dan 20.  Pilih frame 1, pilih Motion pada Tween di panel properties  Pada frame 1 klik teks lalu tentukan warna teks melalui properties, Color, pilih Tint, warna biru. Lakukan hal yang sama pada frame 10 dan 20 dengan warna berbeda.  Jalankan movie 3.2 Membuat Macam-macam Efek Animasi 3.2.1 Animasi Objek Disertai Efek Stretch Animasi ini merupakan motion tween dengan efek perubahan ukuran (skala) dari kecil ke besar atau sebaliknya Contoh :  Ketik teks PESONA EDU dengan jenis huruf Times New Roman, 60, Bold  Ubah teks menjadi symbol (F8)  Klik kanan pada frame 15, pilih Insert Keyframe. Klik kanan pada teks (symbol), pilih Free Transform atau klik menu Modify, Transform, Free Transform Handle
  • 29. Macromedia Flash 8 29  Lebarkan teks tersebut dengan menarik handle symbol ke bawah sehingga tinggi teks menjadi bertambah  Klik kanan mouse pada frame 1, lalu pilih Copy Frame  Klik kanan mouse pada frame 30, lalu pilih Paste Frame  Klik kanan mouse pada frame 1, pilih Create Motion Tween  Klik kanan mouse pada frame 15, pilih Create Motion Tween  Jalankan movie Animasi objek dengan efek Stretch 3.2.2 Animasi Objek Disertai Efek Fade Animasi ini merupakan motion tween dengan efek pemudaran suatu objek Contoh :  Ketik teks (bebas) dengan ukuran huruf 50, bold  Ubah teks menjadi symbol (F8)  Klik kanan pada frame 25, pilih Insert Keyframe untuk membuat Keyframe.  Klik teks (symbol), pada properties, Color Style, pilih Alpha , 0%  Klik kanan pada frame 50, pilih Insert Keyframe untuk membuat Keyframe.  Klik teks (symbol), pada panel properties, Color Style, pilih Alpha , 100%  Jalankan movie
  • 30. Macromedia Flash 8 30 Animasi dengan efek Fade 3.2.3 Animasi Objek dengan Efek Masking (Spotlight) Efek masking berfungsi untuk menyembunyikan objek lain dengan menutupi objek tersebut sehingga yang menutupi terlihat tembus pandang (transparan). Animasi jenis ini sering digunakan untuk membuat iklan huruf berjalan. Untuk lebih jelas, perhatikan contoh berikut ini: Mengatur Ukuran dan Warna Latar Belakang Canvas  Ubah ukuran kanvas (stage) dengan mengklik menu Modify, Document … Kotak dialog Document properties  Ubah nilai width=500, height=70, dan warna latar belakang (background) dengan warna hitam  Klik OK Pembuatan dan Pengaturan Layer  Klik menu Insert, Layer maka akan muncul layer 2 di atas layer 1 atau klik ikon pada timeline  Ubah nama layer 1 menjadi teks dan nama layer 2 menjadi lampu sorot
  • 31. Macromedia Flash 8 31 Menulis Teks dan Membuat Lingkaran  Aktifkan layer teks. Pilih frame 1, lalu ketik teks “ ComputerStar Learning Center” dengan ukuran huruf 36, Bold  Atur letak tulisan agar berada tepat di tengan kanvas (stage) dengan mengklik menu Window, Design Panel, Align. Pada panel align, klik tombol To Stage, lalu tombol Align horizontal center dan Align vertical center.  Aktifkan layer lampu sorot, pilih frame1, lalu buat lingkaran di sebelah kiri di luar kanvas Menulis teks dan membuat lingkaran Membuat Animasi  Aktifkan layer lampu sorot, klik kanan pada frame 40, pilih Insert Keyframe. Seret lingkaran ke sebelah kanan di luar kanvas.  Aktifkan layer teks. Klik kanan pada frame 40, pilih Insert Keyframe.  Klik kanan pada layer lampu sorot, pilih Mask Horizontal center vertikal center To Stage
  • 32. Macromedia Flash 8 32 Membuat efek Masking  Jalankan movie Catatan: Bila Anda tidak bisa menganimasikan sebuah obyek maka Anda harus mengubah obyek menjadi symbol Latihan: Buat animasi bola dunia yang berputar!
  • 33. Macromedia Flash 8 33 Kompetensi Dasar: Menggunakan metoda pembentuk animasi Indikator:  Menggunakan metode frame by frame untuk membuat animasi  Menggunakan metode tweening untuk membuat animasi (motion tween, motion guide, shape tween)  Menggunakan layer untuk membentuk animasi o Mengenal layer o Mengelola layer Projek:  Animasi proses reaksi kimia/fisika  Animasi terbentuknya alam semesta 1 Mengenal Layer Layer adalah lapisan (lembaran) transparan yang digunakan sebagai tempat untuk menggambar/menempatkan objek. Jika animasi yang dibuat masih sederhana maka kita bisa menggunakan satu layer saja, namun untuk animasi yang kompleks kita memerlukan beberapa/ banyak layer. Perhatikan! Layer yang paling atas akan menutup objek layer yang terletak di bawahnya. Kegunaan layer adalah:  Untuk memudahkan dalam menggambar atau mengedit suatu objek tanpa mempengaruhi objek yang berada pada layer lainnya.  Untuk dapat menemukan objek dengan cepat dan mudah ketika akan mengedit objek tersebut  Dapat membuat banyak objek dengan animasi. Perhatikan gambar berikut ini! Padlock Eye Outline View Current Frame Elapse Time Pencil Red X White dot Center Frame Frame Rate Indicator Modify Onion Markers Edit Multiple Frames F Onion Skin Outline Onion Skin
  • 34. Macromedia Flash 8 34 Keterangan:  Pencil : menunjukkan bahwa layer yang dipilih (sedang aktif) dapat digunakan untuk mengerjakan sesuatu pada layer tersebut  Eye (Show/Hide All Layers) : menampilkan/menyembunyikan layer  Padlock (Lock/Unlock All Layers) : mengunci/membuka penguncian layer  Outline View (Show All Layer as Outline) : menampilkan objek pada semua layer dalam bentuk outine (hanya kerangka/garis luar objek)  Red X : menunjukkan bahwa layer tersebut tersembunyi sehingga kita tidak dapat melihat atau mengedit objek pada layer tersebut  White dot : menunjukkan bahwa layer tersebut tidak dikunci atau disembunyikan  Center Frame : menempatkan frame yang dipilih di tengah-tengah timeline  Union Skin : menampilkan serangkaian objek frame dan animasi secara bersamaan  Union Skin Outlines : menampilkan kerangka (garis luar objek) dari serangkaian objek dan animasi secara bersamaan  Edit Multiple Frames : mengedit tiap frame pada area yang berada pada Onion Skin  Modify Union Marker : mengatur area penerapan Onion Skin pada timeline  Current Frame : menunjukkan posisi frame yang sedang aktif  Frame Rate Indicator : menunjukkan ukuran kecepatan animasi (frame/detik)  Elapsed Time : menunjukkan waktu yang sudah terlampaui sampai dengan posisi frame yang aktif pada timeline 2 Mengelola Layer Membuat Layer Baru  Klik menu Insert > Layer atau klik ikon Insert Layer pada timeline Menghapus Layer  Pilih layer yang akan dihapus  Klik ikon Delete Layer Mengubah Nama Layer  Klik ganda (double-click) pada tulisan Layer 2  Ketik nama layer sesuai keinginan, misalnya Teks dan akhiri dengan menekan [Enter] Insert Layer Delete Layer
  • 35. Macromedia Flash 8 35 Mengubah nama layer Perhatikan contoh penggunaan layer dalam membuat animasi berikut ini!  Buka sebuah file baru  Ubah nama Layer 1 menjadi Teks  Pada frame 1 tulis teks berikut ini dengan warna hitam dan letakkan pada bagian tengah- bawah stage  Buat keyframe pada frame 40  Pindahkan teks ke bagian atas-tengah stage  Berikan perintah motion tweening  Ubah warna background dengan warna hitam, dengan memilih menu Properties > Background  Tambahkan satu layer baru dengan mengklik ikon Insert layer  Ubah nama Layer 2 menjadi lingkaran  Gambar sebuah lingkaran dengan warna isian putih di tengah stage  Pindahkan layer lingkaran ke bagian bawah-tengah layer Teks  Jalankan animasi  Tampilan movie selengkapnya dapat dilihat di bawah ini! TUGAS: Buat animasi pemandangan dengan matahari yang bersinar dan bergerak yang akhirnya tenggelam di cakrawala dan ikan yang berenang kemudian muncul dan lompat ke permukaan laut dan berengan lagi. Buat air laut terlihat bening (transparan) sehingga animasi ikan terlihat.
  • 36. Macromedia Flash 8 36 Kompetensi Dasar: Menggunakan metoda pembentuk animasi Indikator:  Membuat objek symbol (instance)  Membuat tombol  Membuat Movie Clip  Menggunakan Scene untuk membentuk animasi  Mengenal Scene  Mengelola Scene Projek:  Cerita Animasi 1. Mengenal dan Membuat Symbol Symbol adalah objek yang dapat digunakan berulang-ulang dan tersimpan di dalam Library (perpustakaan) Macromedia Flash. Ada tiga jenis symbol dalam Macromedia Flash, yaitu:  Movie Clip : jenis simbol untuk membuat objek-objek animasi  Button : jenis simbol untuk membuat tombol interaktif  Graphic : jenis simbol untuk membuat objek statis yang siap dianimasikan 1.1. Movie Clip Digunakan untuk membuat sebuah animasi yang berjalan sendiri pada sebuah scene sehingga memiliki timeline tersendiri dan pergerakannya tersendiri juga. Untuk membuat movie clip, ikuti langkah-langkah berikut:  Klik menu Insert, New Symbol (Ctrl + F8), maka akan muncul kotak dialog:  Name : diisi dengan nama symbol yang Anda inginkan, misalnya : pesawat  Klik Ok  Buatlah/ambil sebuah gambar, misalnya gambar pesawat dengan File, Import, Import to Stage  Buatlah animasi untuk menggerakkan objek pesawat dari tepi stage ke tepi kanan stage dengan menggunakan motion tweening
  • 37. Macromedia Flash 8 37 Membuat Instance Symbol Movie Clip yang baru Anda buat sudah tersimpan pada Library. Untuk menggunkan symbol tersebut Anda dapat mengikuti langkah-langkah berikut ini:  Pilih/klik jendela Scene 1  Klik menu Window, Library (F11) maka akan tampil kotak dialog  Geser (drag) symbol pesawat ke stage. Symbol yang berada pada stage disebut Instance. Anda dapat melakukan pengeditan terhadap instance, misalnya mengubah ukuran instane atau memutar instance dengan cara pilih instance, lalu klik menu Modify, Transform, Scale and Rotate. Anda juga dapat mengubah efek warna pada instance dengan memilih coraknya melalui properties, Color Style, lalu tentukan nilai presentase. Dalam latihan ini kita menggunakan efek warna Alpha 40% untuk instances yang berada di tengah stage.  Jalankan animasi Bila Anda ingin membuat symbol dari gambar yang sudah ada maka lakukanlah langkah- langkah berikut:  Pilih/blok gambar tersebut  Klik menu Modify, Convert to Symbol… (F8) maka akan muncuk kotak dialog Convert to Symbol  Langkah selanjutnya sama dengan ketika membuat symbol baru Mengedit Symbol Untuk Mengubah Seluruh Instance Pada pengeditan sebelumnya, setiap instance diedit satu persatu. Ada cara yang dapat digunakan untuk mengedit seluruh instance yang berasal dari satu symbol. Untuk itu ikuti langkah-langkah berikut ini:  Pilih salah satu instance  Klik Edit, Edit Symbols (Ctrl + E). semua instances akan hilang dan yang tampil hanya instance yang dipilih. Keadaan ini disebut modus Symbol Editing  Ubah arah symbol (pesawat) menjadi seperti gambar berikut ini:
  • 38. Macromedia Flash 8 38  Klik Scene 1 untuk kembali ke stage utama. Tampilkan objek pada stage menjadi seperti berikut ini: 1.2. Button Digunakan untuk membuat tombol sebagai media interaksi antara pengguna dengan aplikasi yang dibuat. Untuk membuat symbol button ikuti langkah-langkah berikut:  Klik menu Insert, New Symbol (Ctrl + F8) maka akan tampil kotak dialog berikut:
  • 39. Macromedia Flash 8 39  Pada kotak teks Name ubah nama symbol menjadi : Tombol  Pilih Button pada bagian Type  Klik Rectangle tool pada toolbox  Klik ikon Round Rectangle Radius pada toolbox (pada bagian Option) maka akan tampil kotak dialog berikut;  Corner Radius diisi sebesar 30 points  Klik OK  Gambar sebuah tombol dengan Fill Color berwarna hitam, lalu gunakan Text Tool untuk menulis teks berwarna putih di atas tombol tersebut.  Pada Timeline akan terlihat empat buah frame yaitu Up, Over, Down, dan Hit  Buat keyframe pada frame Over (F6). Pilih teks “Tombolku” dan ubah warnanya menjadi kuning. Pilih tombolnya saja lalu ubah warnanya menjadi merah (atau dengan warna gradasi). Lakukan hal yang sama pada frame Down. Up (putih) Over (kuning) Down (hijau)  Klik jendela Scene 1 untuk kembali ke movie utama  Jalankan animasi. Cobalah untuk melewatkan mouse di atas tombol, lalu klik pada tombol tersebut dan Anda akan melihat perubahan yang menarik pada tombol tersebut.  Simpan file dengan nama : Tombolku Round Rectangle Radius : untuk membentuk sudut tumpul pada segi empat. Kegunaan/fungsi dari frame-frame pada symbol button:  Up : adalah kondisi button sepanjang movie, normal dan tidak mengalami perubahan apa-apa.  Over : adalah kondisi button bila mouse berada di atasnya, dapat berupa perubahan warna, suara, dan lain-lain.
  • 40. Macromedia Flash 8 40  Down : adalah kondisi dimana user menekan dan melepas mouse pada button, tidak perlu selalu ada namun, akan sangat manis ditambahkan untuk lebih menunjukkan interaktivitas.  Hit : adalah area tersembunyi dari tombol. 1.3. Graphic Digunakan untuk membuat objek mati/tanpa animasi. Untuk membuat symbol Graphic ikuti langkah-langkah berikut:  klik menu Insert, New Symbol (Ctrl + F8) maka akan tampil kotak dialog:  pada kotak teks Name, ubah nama symbol menjadi Ikan  pilih Graphic pada bagian Type.  Gambarlah seekor ikan yang cantik, kreasi Anda sendiri. Latihan : membuat movie clip - Buat symbol baru dengan type : Movie clip, beri nama : kumbang - Buat beberapa layer, untuk menempatkan masing-masing bagian kumbang, yaitu: badan, kepala, sayap kiri, sayap kanan, sungut kiri, sungut kanan - Aktifkan layer badan. Buat gambar seperti di bawah ini, beri warna yang berbeda untuk setiap ruas badan. - Aktifkan layer kepala, tambahkan kepala
  • 41. Macromedia Flash 8 41 - Aktifkan layer sayap kanan. Buat sayap, cara yang mudah adalah buat lingkaran dan kotak dengan kotak membelah lingkaran. Kemudian hapus gambar kotak - Pindahkan sayap ke badan kumbang - Duplicate (copy) sayap kanan, aktifkan layer sayap kiri kemudian pilih menu Edit > Paste in Place - Kemudian putar agar menjadi model sayap kiri. Sebelumnya pindahkan pusat rotasi ke tengah, kemudian pilih menu : Modify > Transorm > Flip Horizonatal - buat sungt kiri dan kanan. Caranya seperti membuat sayap kiri dan kanan Pusat rotasi
  • 42. Macromedia Flash 8 42 - klik kanan pada frame 5 (contoh) > Insert Keyframe kemudian rotasi agar sayap kanan dan kiri seperti di bawah ini. Perhatikan posisi pusat rotasi - setelah itu atur rotasi sungut - Klik TAB Scene untuk kembali ke layer utama
  • 43. Macromedia Flash 8 43 - Klik menu Window > Library - Pindahkan movie clip kumbang ke stage dengan cara drag and drop gambar kumbang atau nama movie clip. Dapat ditambahkan guide layer agar kumbang dapat terbang mengikuti jejak/track. - Jalankan movie clip 2. Mengenal Scene Scene merupakan bagian-bagian dari sebuah projek yang berisi kumpulan layer, gambar animasi maupun tombol, dan pada setiap scene, gambar, animasi objek dan tombol dapat berbeda-beda sesuai Sebagai contoh, Anda dapat menggunakan scene terpisah untuk halaman pembukaan (introduksi) dan isi dari movie (halaman utama). Sebuah scene bisa terdiri dari sebuah layer saja atau bisa juga terdiri dari banyak layer. Anda dapat menambahkan, menghapus, menduplikasi, dan mengubah nama scene. Untuk menghentikan movie pada scene berikutnya, dapat menggunakan action. 2.1. Mengelola Scene Menampilkan Scene  Klik menu Window, Design Panels, Scene Panel Scene Catatan: Anda dapat menambahkan suara pada Movie Clip, Button maupun Graphic. File > Import to Library file suara(sound) kemuddian drag file suara dari library ke layer. Delete scene Add scene Duplicate scene
  • 44. Macromedia Flash 8 44 Membuat Scene Baru  Klik tombol (ikon) Add scene Anda juga bisa menggunakan menu Insert > Scene Membuat Scene Baru  Klik tombol (ikon) Add Scene Menghapus Scene  Klik tombol (ikon) Delete Scene Mengubah Nama Scene  Klik ganda nama scene pada panel scene  Ketik nama baru sesuai keinginan TUGAS : Buat animasi kupu dan kumbang berterbangan di dalam taman bunga. PROJEK I: Reboisasi Scene I : animasi tentang keadaan hutan yang hijau dengan burung, kupu-kupu, dan kumbang yang beterbangan dengan indah. Scene II : terjadi penebangan hutan Scene III : terjadi bencana alam banjir karena penebangan hutan Scene IV : hutan ditanam kembali (dari bibit sampai tumbuh menjadi pohon besar) dan menjadi hijau kembali. PROJEK II: proses terjadinya gempa Vulkanik
  • 45. Macromedia Flash 8 45 Mempublikasikan File File flash harus dipublikasikan terlebih dahulu sebelum digunakan sesuai keperluan Anda. Untuk itu ikuti langkah-langkah berikut ini:  Simpan file Anda dengan klik menu File, Save As… pada folder yang diinginkan lalu berikan nama file, misal : SitusPribadi (jika digunakan untuk web)  Klik menu File, Publish Setting… maka akan tampil kotak dialog Publish Setting berikut: Kegunaan Type di bawah ini: a. Flash (.swf) : file yang telah dibuat dengan menggunakan Macromedia Flash dan hanya bisa diijalankan pada komputer yang sudah terinstal Flash. b. HTML (.html) : file yang berisi script HTML yang membuat flash movie dapat ditampilkan di jendela browser. c. GIF Image (.gif) : file flash yang dipublish menjadi file berextension .gif d. JPEG Image (.jpg) : file flash yang dipublish menjadi file berextension .jpg. e. PNG Image (.png) : file dengan format bitmap yang mendukung transparansi (alpha channel), dan merupakan format file asli dari Adobe Fireworks. f. Window Projector (.exe) : adalah file yang dapat dijalankan di semua komputer tanpa harus terinstall Flash. g. Macintosh Projector : file flash yang akan dipublish menjadi file berextention .exe, yang menghasilkan aplikasi tertentu berbasis windows. h. QuickTime (.mov) : file flash yang dirubah menjadi file berextention .mov, dijalankan seperti movie dan dijalankan pada aplikasi program Quick Time.
  • 46. Macromedia Flash 8 46  Agar lebar dan tinggi movie yang akan ditampilkan pada web browser sesuai dengan ukuran layar berapa pun maka klik tab HTML, pilih pada bagian Dimension: Percent dan Scale: Exact fit  Klik tombol Publish  Buka Windows Explorer, lalu cari folder tempat Anda menyimpan file flash. Di sana sudah terdapat tiga file baru Tiga file baru hasil publikasi  Klik ganda pada file SitusPribadi.html maka movie flash Anda akan tampil pada browser web File berekstensi exe adalah file yang dapat dijalankan pada komputer tanpa harus terinstal Flash. Tugas: Buat suatu cerita animasi yang terbagi beberapa Scene:
  • 47. Macromedia Flash 8 47 Kompetensi Dasar: Menggunakan ActionScript pembentuk animasi Indikator:  Mengidentifikasi ActionScript dasar  Menggunakan ActionScript dasar pembentuk animasi Projek:  Animasi Peta Buta  Game Sederhana 1. Mengenal ActionScript ActionScript adalah bahasa pemrograman di flash. ActionScript dapat digunakan untuk mengontrol objek, membuat navigasi, dan elemen interaktif lain serta membuat movie flash dan aplikasi web yang interaktif. Action diperlukan untuk membuat movie atau web Anda terlihat lebih professional, efisien, dan interaktif. Anda dapat memberikan action pada frame, button, maupun movie clip. Secara umum ada 2 macam cara penulisan ActionScript, yaitu:  Mode Normal : menulis script dengan cara memilih jenis syntax kemudian menekan nama syntax di action toolbox, maka secara otomatis kode syntax yang dipilih akan tampil di script pane dan tidak bisa di edit  Mode Expert : menulis script dengan mengetikannya langsung pada script pane, karena pada mode ini script pane menjadi area yang dapat diedit secara manual Action dapat dipanggil melalui panel action. Untuk menampilkan panel action klik menu Window, Development Panels, Action (F9) Editor ActionScript Seperti disebutkan di atas, sesuai jenisnya, actionScript dapat ditempatkan pada objek (tombol/movieclip) dan pada frame. Cara Penulisan ActionScript - Klik pada objek (tombol/movieclip) atau pada frame - pilih menu Window>Action (F9) atau klik pada Action Bar
  • 48. Macromedia Flash 8 48 Akan muncul layar editor: (mode expert : penulisan actionscript dituliskan sendiri). Action pada layer 1: frame 1 Action pada tombol dengan nama tombol_1 Action pada movieclip dengan nama lingkaran Layar editor mode : Script Assist (penulisan actionscript dibantu wizard) Klik tombol : (untuk berpindah dari mode expert ke wizard atau sebaliknya)
  • 49. Macromedia Flash 8 49 Penulisan action, variable, method, dan properties adalah CASE SENSITIVE (huruf kecil dan besar dibedakan). Penulisan harus tepat huruf besar dan kecilnya 1.1. Action Frame (ActionScript pada Frame) adalah Actionscript yang diletakkan pada frame atau juga sering disebut FrameScript. FrameScript ini hanya bisa dilakukan pada keyframe atau blankeyframe. Untuk melihat frame yang telah diberikan Script terdapat tanda berupa huruf „a‟ kecil yang menandakan keberadaan sebuah script. Penulisan ActionScript pada Frame Bentuk Umum: Nama_tombol/movieclip/_root.onEvent = function() { Perintah/statement …………………… } Contoh: lingkaran_mc.onPress=function(){ }
  • 50. Macromedia Flash 8 50 Praktikkan contoh berikut ini!  Buat file baru  Siapkan dua layer, yaitu layer Tombol dan Animasi  Pada layer Tombol, siapkan dua buah symbol tombol (lihat gambar)  Pada frame 1 layer Animasi tekan tombol F9 (klik panel Action), pilih +, Global Functions, timeline Control, stop  Buat keyfrafme pada frame 2, gambarlah sebuah kotak di bawah tombol-tombol (lihat gambar)  Pilih frame 2, beri nama frame pada kotak teks Frame label pada bagian properties. Nama frame : Kotak
  • 51. Macromedia Flash 8 51  Pada frame 19 masukkan keyframe lalu berikan action stop  Pada frame 20 masukkan keyframe, lalu gambarlah sebuah lingkaran pada tempat kotak tadi. Nama frame : Lingkaran  Pada frame 40 masukkan keyframe lalu berikan action stop  Tambahkan beberapa efek animasi kreasi Anda sendiri sehingga movie Anda menjadi lebih menarik  Jalankan movie, klik tombol Kotak lalu tombol Lingkaran 1.2. Action Object Adalah Actionscript yang terdiri dari kumpulan properties. Action ini bisa diterapkan pada button, movie clip, atau objek lainnya. Penulisan ActionScript pada Tombol Bentuk Umum: on(Event) { Perintah/statement …………………… }
  • 52. Macromedia Flash 8 52 Contoh : on (keyPress "<Home>") { gotoAndPlay(1) ………………… } On (Press) { gotoAndPlay(1) ………………… } Penulisan ActionScript pada Movieclip Bentuk Umum: onClipEvent(Event) { perintah/statement ………………… } Contoh : onClipEvent(keyUp) { if (Key.getCode()==Key.RIGHT) { ………….. } } onClipEvent(keyUp) { if (Key.getAscii()==39) { ………….. } } onClipEvent(keyUp) { if (Key.isDown(Key.RIGHT) ){ ………….. } }
  • 53. Macromedia Flash 8 53 KOMENTAR Komentar digunakan untuk memberi keterangan pada penulisan script dan tidak akan diproses. Tanda komentar: // : untuk menandai satu baris perintah /* */ : untuk menandai blok perintah (diawali dengan /* dan diakhiri */) Fungsi dari action dan properties di bawah ini :  Stop : untuk memberhentikan jalannya animasi.  Play : untuk mulai menjalankan animasi.  gotoAndPlay : untuk mulai dengan memilih frame.  gotoAndStop : untuk memberhentikan animasi dengan memilih frame. Bentuk Umum: gotoAndPlay/gotoAndStop gotoAndPlay(no.frame/label_frame) contoh : gotoAndPlay(10) gotoAndPlay(“awal”)  _visible : tombol akan terlihat Bentuk Umum: Nama_instance._visible= nilai Ket : nilai : 0/1 (false/true) Tombol._visible = 1 Tombol._visible = false Beberapa daftar Method dan Properties: Method Fungsinya fscommand Mengirimkan perintah ke browser, flash player, atau proyektor untuk mengontrol tampilan movie Contoh: fscommand(“fullscreen”,”true”) menjadikan layar fullscreen fscommand(„quit”)  keluar dari flash goto Memindahkan playhead ke frame/scene tertentu - gotoAndPlay(scene, no_frame) - gotoAndStop(scene, no_frame) - nextFrame - prevFrame - nextScene
  • 54. Macromedia Flash 8 54 Method Fungsinya - prevScene loadMovie Menampilkan file swf/image ke dalam level atau movieclip tertentu loadMovie(folder/nama_file, level/movieclip_target) play Memainkan movie mulai di posisi playhead B.U : play() stop menghentikan movie mulai di posisi playhead B.U : stop() Sound Object Method Fungsi new Sound(target) Membuat objek suara baru B.U: nama_variabel = new Sound() attachSound(id_nama) Memasukkan symbol suara dari library ke dalam movie getVolume() Mengahasilkan/menampilkan nilai volume suara setVolume(nilai) Mengatur volume suara start(detik_awal, loop) Menjalankan/membunyikan suara Detik_awal : detik awal dimulainya suara Loop : jumlah pengulangan suara Stop() Menghentikan suara Bentuk Umum penulisan properties pada objek: Nama_movieclip.properties = nilai Bentuk Umum penulisan method pada objek : Nama_variabel_suara.method_suara Key Object Method Fungsi getCode() Menjalankan kode tombol getAscii() Menjalankan kode tombol ASCII isDown(keycode) Memeriksa apakah tombol tertentu ditekan (biasanya digunakan bersamaan dengan perintah IF KEYCODE: BACKSPACE CAPSLOCK CONTROL DELETEKEY DOWN END ENTER ESCAPE HOME INSERT LEFT PGDN PGUP RIGHT SHIFT SPACE TAB UP
  • 55. Macromedia Flash 8 55 Latihan: Membuat Tombol link Tombol link adalah tombol yang digunakan untuk memanggil alamat/URL lain di internet. Misalnya ketika tombol diklik maka akan berpindah ke alamat situs atau ke halaman web tertentu. Di bawah ini akan diberikan contoh membuat tombol link dimana ketika tombol diklik maka akan berpindah ke halaman baru (file gambarku.swf) yang berisi gambar yang Anda inginkan (gambar Anda sendiri). Ikuti langkah-langkah berikut:  Buat sebuah file baru. Masukkan gambar Anda (bebas) pada stage dengan memilih menu File, Import, Import to Stage maka akan tampil kotak dialog berikut:  Pilih gambar yang akan digunakan, klik Open  Simpan file dengan nama : gambarku.fla  Jalankan movie (akan terbentuk file gambarku.swf)  Tutup file gambarku.fla  Buat file baru, kemudian buat tombol dan beri nama: Tombolku  Buat kotak dengan menggunakan rectangle tool, dan ubah menjadi movie clip  Beri nama movie clip dan instance dengan nama frame  Pilih/blok tombol bertuliskan Tombolku  Klik menu Window, Development Panel, Action (F9) maka akan tampil Panel Action, klik +, pilih Action, Browser/Network, getURL
  • 56. Macromedia Flash 8 56  Pada kotak teks URL, isi (ketik) nama file gambarku.swf (lengkap dengan ekstensi) atau langsung mengetikkan actionscript. Hasilnya akan terlihat seperti di bawah ini  Jalankan movie, kemudian klik tombol “Tombolku” Perhatikan hasil tampilannya!  Ubah script pada tombol dengan menghilangkan frame : loadMovie(“gambarku.swf”)  Jalankan kembali movie (file Tombolku). Klik tombol “Tombolku”. Perhatikan hasil tampilannya.
  • 57. Macromedia Flash 8 57 Tugas: Keterangan projek PETA BUTA: - tanda gambar untuk kota, gunung, sungai pada peta dibedakan - pada saat mouse rollover pada tanda gambar, bagian tersebut menjadi lebih besar dan muncul namanya dan muncul informasinya - pada saat diklik muncul informasi mengenai kota/gunung/sungai tersebut Projek: Buat website:  Website Personal/Pribadi  Penjualan suatu produk  Website sekolah