Modul Adobe Flash CS.5 Tujuan Instruksional Umum Mahasiswa dapat membuat media pembelajaran berbasis animasi, video dan audio (multimedia) secara interaktif.
A. Mengenal Tools Tools Pengolah Multimedia (Adobe Flash CS5) Program ini berbasis vektor grafs, jadi aksesnya lebih cepat dan terlihat halus halus pada pada skala skala resol resolusi usi layar layar berapa berapapun pun.. Progra Program m ini juga juga dapat dapat diisi diisi dengan bitmap yang di-impor dari program lain. Salah satu keunggulannya adalah ukurannya ukurannya yang begitu kecil kecil namun dapat menampilka menampilkan n animasi animasi web web yang yang meng mengag agum umka kan. n. Flash juga mempunyai kemampuan untuk membu membuat at anima animasi si seca secara ra streaming, streaming, yaitu yaitu dapat dapat menampil menampilkan kan animas animasii langsung meskipun proses download dan loading belum selesai seluruhnya. Selain Selain itu, dengan Flas Flash h juga dapat dibuat movi movie e kartun dan aplikasi web interak interakti ti yang yang memung memungkink kinkan an penggu pengguna na dapat dapat berinte berinteraks raksii langsu langsung ng dengan dengan aplika aplikasi si yang yang dibuat dibuat.. Movi Movie e Flas Flash h juga bisa memasukkan unsur interakti interakti dalam dalam movie-nya movie-nya dengan Action Script (bahasa pemrograman di Flash Flash sehingga user bisa berinteraksi dengan movie melalui keyboard atau mouse untuk berpindah ke bagian-bagian yang berbeda dari sebuah movie, movie, memin meminda dahk hkan an objek objek-ob -obje jek, k, mema memasu sukk kkan an ino inorm rmas asii mela melalui lui form, form, dan operasi-operasi lainnya. !eleb elebiha ihan n lain lain yang yang dimil dimiliki iki prog progra ram m Adobe Flash adalah mampu membuat membuat tombol tombol intera interakti kti dengan dengan sebuah sebuah mov movie atau atau objek objek yang yang lain. lain. "dobe Flash mampu membuat perubahan transparansi warna dalam movie. movie. Adobe Flash mampu mampu membuat membuat peruba perubahan han animas animasii dari dari satu satu bentuk bentuk ke bentuk lain dan mampu membuat gerakan animasi dengan mengikuti alur yang yang tela telah h dite diteta tapk pkan an.. #eng #engan an Adobe Flash, Flash, fle fle dapa dapatt dik dikonve onvers rsii dan dan dipublikasikan ( publish publish ke dalam fle aplikasi (e$e.
%
B. Memahami User Interfae Adobe Flash CS.5 &ni adalah interace dari macromedia "dobe 'lash S).
*ambar %. &nterace "dobe 'lash S) (aption
+
Propertis
olor3 swatches
2oolsbo$ 2oolsbo$
Stage ibrary 2imelin
ayer "ction
*ambar +. ingkungan kerja adobe ash cs) (aption
!eterangan ingkungan ingkungan !erja "dobe 'lash S) S ) •
kumpulan lan tool tool atau atau perala peralatan tan yang yang mempun mempunyai yai ungsi ungsi-Toolbo!, kumpu ungsi ungsi tersendiri tersendiri untuk untuk berbagai berbagai keperluan keperluan seperti desain, desain, editing, editing,
•
dan pengaturan gambar atau objek. Title Bar" merupakan nama fle atau judul program yang sedang akti
•
atau sedang digunakan. Ation Sri#t, actionScript adalah bahasa pemprograman di ash. "dobe dobe
'las 'lash h
S) S)
mend menduk ukun ung g
semua emua
vers ersi
"ction tionSc Scri ript pt
+./. +./.
"ctionScr "ctionScript ipt digunakan digunakan untuk untuk mengontro mengontroll objek, navigasi, animasi, animasi, •
dll. 0ntuk membuat program yang dibuat lebih interakti. interakti. atau gari garis s wakt waktu u memp mempun uny yai ungs ungsii Timeline Timeline Panel" Panel" atau
•
membantu penempatan objek pada ungsi waktu. Stage" halaman kerja yang digunakan untuk menempatkan berbagai
•
macam objek ash yang akan ditampilkan. Color Mi!er Panel" panel yang berungsi untuk pengaturan warna
• •
unt untuk
dari gambar atau objek. Transform panel yang yang menyimpa menyimpan n objek-o objek-objek bjek sepert sepertii movie movie $ibrar $ibrar% % Pane Panel" l" panel clip clip,, grap graphi hic, c, butt button on,, soun sound, d, video video,, dll, dll, yang yang digu diguna naka kan n dala dalam m pembuatan aplikasi.
1
•
$a%er" dapat dianalogikan sebagai kanvas suatu lukisan. 4umlah layer bisa lebih dari satu, dalam kata lain berlapis-lapis. ayer yang berada paling atas adalah kanvas yang terdepan.
Mengenal Toolbo! dan Panel •
Toolbo! 'asil asilit itas as
2oolb oolbo o$
sepe sepert rtii
tela telah h
dije dijela lask skan an
seki sekila las s
diaw diawal al
adal adalah ah
sekump sekumpula ulan n tool tool atau atau alat alat yang yang mempun mempunyai yai ungsi ungsi-u -ungs ngsii tersen tersendir dirii untuk keperluan keperluan desaindsb, berikut berikut ini penjelasan setiap tool yang ada di 2oolbo$.
*ambar 1. 2oolbo$ (aption
2abel 2abel %. !eterangan !eterangan toolbo$ 5
*amba
o
r
%
!eterangan
atau dis disebu ebutt juga juga Select Selection ion Arro Arro& & Too ooll (') (') atau 2ool 2ool berungsi untuk memilih atau menyeleksi suatu objek.
+
Subseletion Tool (A)" berungsi menyeleksi bagian objek lebih detail dari pada Selection 2ool. 2ool.
1
berungsi untuk Free Transform ransform Tool ()" berungsi
6
menstransormasi objek yang terseleksi. 6
rad radie ient nt
Trans ransfo form rm
Too ooll
(F)" (F)" berungsi
untuk untuk mentra mentrans nsor ormas masii warna warna dari dari fil objek objek yang terseleksi. )
digunakan untuk melakukan melakukan $asso $asso Too ooll (S)" (S)" digunakan sele seleks ksii
deng dengan an
meng mengam amba barr
sebu sebuah ah
gari garis s
seleksi. 7
digunakan untuk mengambar mengambar Pen Tool (P)" digunakan garis dengan bantuan titik-titik bantu.
8
Add Anhor Point Tool Tool (*)" berungsi untuk menambah "nchor Point dari garis, kurva atau gambar.
9
+ele elete Anho hor Point int Tool (,)" ,)" berungsi untu untuk k meng mengha hapu pus s "n "nch chor or Point oint dari dari garis garis,, kurva, atau gambar.
:
berungsi untuk untuk ConCon-er ertt Anh Anhor or Too ooll (C)" (C)" berungsi mengkonersi garis, kurva atau gambar.
%/
digunakan kan untuk untuk membuat membuat Te!t Tool (T)" (T)" diguna objek te$t.
%%
digunakan untuk mengambar mengambar $ine Tool ()" digunakan atau membuat garis.
%+
/eta etan ngle gle
Too ooll
(/)" (/)"
digu diguna naka kan n
untu untuk k
mengambar bentk persegi panjang atau bujur sangkar. %1
digunaka kan n untuk untuk membuat membuat 0-al 0-al Tool (0)" (0)" diguna bentuk bulat atau oval.
%6
Pol% Star Tool" digunakan untuk menggambar bentuk dengan jumlah segi yang diinginkan.
%)
digunakan untuk membuat Penil Penil Tool (')" digunakan garis.
%7
Brush Tool (B)" digunakan untuk mengambar bentuk garis-garis dan bentuk-bentuk bebas.
%8
digunakan untuk mengubah mengubah In1 In1 Bo Bott ttle le (S)" (S)" digunakan warna garis, lebar garis, dan style garis, atau garis luar sebuah bentuk. )
%9
Paintbu1et mengisi
Tool
area-area
digunakan
(2)" kosong
atau
untuk
digunakan
untuk mengubah warna area sebuah objek yang
telah
diwarnai,
digunakan
untuk
pengisian
warna
paint
bucket
dapat
mewarnai
warna
solid,
gradiasi
dan
pengisian
bitmap. %:
3%edro##er
Tool
(I)"
digunakan
untuk
mengambil sampel sebuah warna dari gambar atau objek. +/
3raser Tool (3), digubakan untuk menghapus objek.
+%
4and Tool (4)" digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran.
++
oom
Tool
memperbesar
(M"), atau
digunakan
memperkecil
untuk tampilan
stage. +1
Stro1e Color digunakan untuk memilih atau memberi warna pada suatu garis.
+6
Fiil
Color
digunakan
untuk
memilih
atau
memberi warna pada suatu objek. +)
Bla1 and 6hite digunakan hanya untuk memilih warna hitam dan putih saja.
•
Adobe Flash Pla%er
Flash Pla%er digunakan sebagai player untuk menjalankan fle-fle yang berekstension . sw (shock wave ash. 0ntuk mengeksekusi fle a. !e sw , silahkan tekan ctrl ; enter.
7
*ambar 6. 'lash player (sw (aption
•
Cara Men%im#an File
!lik 'ile -< klik save as -< !etik nama flenya -< Pilih atau buat older baru untuk menyimpan fle -< !lik save.
8
*ambar ). =enyimpan fle (aption
C. Membuat Animasi Sederhana 7. +asar Animasi #alam pembutan animasi selalu berhubungan dengan frame. Frame adalah suatu bagian dari layer yang terdapat dalam panel timeline yang digunakan untuk mengatur pembuatan animasi.
*ambar. 7. >agian Panel Timeline
Suatu animasi dapat berjalan oleh adanya perpindahan dari frame ke frame. Semakin panjang frame yang dibutuhkan maka semakin lama animasi itu berjalan. Suatu animasi bisa terdiri dari beberapa layer . Suatu layer dapat diikuti layer guide dan layer mask . Layer guide berungsi untuk memberikan panduan
pada
layer
yang
diguide.
Layer
mask
berungsi
untuk 9
menyembunyikan serta menampilkan bagian lain pada layer dimasking. >erikut ini dasar-dasar dari animasi.
Motion Tween
Motion Tween adalah animasi yang digunakan untuk menggerakkan objek yang sudah dikonversi ke dalam bentuk simbol berdasarkan batas suatu keyframe tertentu. Simbol-simbol dalam ash yaitu movie clip, button dan graphic.
Cara #embuatan animasi motion tween adalah
•
2entukan frame awal dari animasi >uat objek animasi !onversi objek ke dalam symbol yang diinginkan 2entukan frame akhir dari animasi Sisipkan create motion tween diantara frame awal dan frame akhir
•
sehingga muncul garis panah Pada frame akhir tentukan letak posisi objek -< ?ksekusi animasi
• • • •
dengan test movie.
'rame "wal
2wen Shape
'rame "khir
@bjek Gambar. 7 Bentuk Layer pada Tehnik Motion Tween
Shape Tween Shape Tween adalah animasi yang digunakan untuk mengubah satu bentuk ke bentuk yang lain. b!ek harus berupa objek normal (objek terbreak a part.
Cara #embuatan animasi shape tween
:
sama seperti pada motion tween, perbedaannya objek tidak dalam bentuk simbol. "nimasi ini posisi objek tidak berubah, hanya mengalami perubahan bentuk.
2wen Shape
'rame "wal
@bjek
tidak
terkonersi
'rame "khir
dalam
*ambar. 9 >entuk Layer pada 2ehnik Shape Twee
Teknik Guide 2eknik guide adalah teknik menggerakkan animasi sesuai guide yang telah dibuat pada layer guide. "uide yang dibuat berupa garis yang mempunyai arah dan lintasan tertentu
ayer guide
@bjek
ayer yang di
*aris guide
*ambar. : >entuk Layer Pada 2ehnik "uid
Cara membuat uide adalah sebagai beri1ut 8 •
>uka lembar kerja "dobe 'lash S.)
%/
•
>uatlah sebuah objek lingkaran dalam stage pada layer % dan rame %
Membuat Motion uide 7 •
0bah lingkaran yang telah dibuat menjadi bentuk movie clip. aranya klik kanan pada objek lingkaranAconvert to symbolAisikan 5ame dengan lingkaran, 2ype =ovie clip, Begistration berada di tengahA@!, maka akan menjadi seperti berikutC
Membuat Motion uide 9
%%
•
2erdapat seleksi persegi disekeliling lingkaran. !lik kanan pada layer %, lalu pilih "dd lassic =otion *uide.
Membuat Motion uide : •
alu akan muncul ayer *uide.
Membuat Motion uide ; •
Pada ayer *uide buatlah lintasan untuk pergerakan dari objek lingkaran dengan menggunakan Pencil 2ool.
%+
Membuat Motion uide 5 •
2empatkan lingkaran tepat diujung garis lintasan yang telah dibuat. Begistration point object (2itik tengah yang tedapat pada lingkaran wajib tepat di titik paling ujung garis.
%1
Membuat Motion uide <
Membuat Motion uide =
%6
•
>lok rame %/ pada masing-masing layer. alu klik kananA&nsert 'rame
Membuat Motion uide > •
!lik kanan pada rame %/ ayer %Apilih &nsert !ey 'rame
Membuat Motion uide ? •
Pada layer % rame %/ tersebut pindahkan objek lingkaran ke ujung garis lintasan yang lain dengan posisi Begistration point object tepat pada ujung garis .
%)
Membuat Motion uide 7@ •
!lik kanan pada rame % layer %Apilih reate lassic 2ween
Membuat Motion uide 77
%7
•
alu time line akan menjadi seperti berikut.
Membuat Motion uide 79
•
alu untuk mengujinya tekan trl;?nter
Membuat Motion uide 7:
Te1ni1 Masking 2eknik masking digunakan untuk menyembunyikan isi layer lain tetapi akan ditampilkan saat movie dijalankan. "nimasi masking mempunyai dua metode dasar, yang pertama adalah area masking yang bergerak %8
sedang objek yang dimask diam, yang kedua adalah area masking yang diam sedang objek yang dimask bergerak. !edua teknik tersebut akan menampilkan animasi yang berbeda.
ayer
*ambar.%/ >entuk Layer Pada Teknik Masking
Membuat Animasi 4uruf +engan Mas1ing •
Siapkan tiga buah layer dengan cara menekan icon #ew Layer yang tersedia dibawah Timeline. Perhatikan gambar dibawah D
•
Membuat Animasi 4uruf +engan Mas1ing @
alu layer akan bertambah seperti berikut
%9
Membuat Animasi 4uruf +engan Mas1ing @
•
0bah nama ayer % dengan nama yang diinginkan. #isini silahkan dengan ganti dengan nama @bjek% dengan cara klik dua kali pada ayer %.
•
Membuat Animasi 4uruf +engan Mas1ing @
!lik rame % pada layer @bjek% dan buatlah sebuah teks pada Stage. >uatlah teks bertuliskan E=askingkuF dengan warna bebas.
%:
•
Membuat Animasi 4uruf +engan Mas1ing @
Sekarang ubah ayer + dengan nama @bjek opy dengan cara seperti mengubah nama layer %. alu $opy -kan teks E=askingkuF dari layer @bjek%. Posisi harus sama persis dengan cara klik kananA%aste &n %lace di stage rame % ayer @bjek opy.
+/
•
Membuat Animasi 4uruf +engan Mas1ing @
Seolah tidak ada perubahan, akan tetapi apabila teks tersebut digeser maka akan terlihat teks tersebut sudah ter-$opy
•
0bahlah warna teksF=askingkuF pada layer @bjek opy cengan warna yang berbeda dengan teks E=akingkuF di ayer @bjek%.
+%
•
Pembedaan
Membuat Animasi 4uruf +engan Mas1ing @
warna
tersebut
akan
berpengaruh
ketika
animasi
berjalan. Garna kilatan yang akan muncul, sesuai dengan warna teks pada ayer @bjek opy. •
0bah nama ayer 1 dengan nama "nimasi. alu pada rame %, buatlah objek dengan warna bebas serta posisi seperti berikut
++
•
Membuat Animasi 4uruf +engan Mas1ing @
alu, untuk menggerakkan animasi, tambahkan frame pada setiap layer dengan cara blok rame %/ pada masing masing layerAklik kananA&nsert Frame. =aka akan muncul seperti berikut
Membuat Animasi 4uruf +engan Mas1ing @
+1
•
>lok rame %/ pada layer animasi, alu klik kananAinsert key frame.
•
Membuat Animasi 4uruf +engan Mas1ing @
0bah posisi objek animasi ke tempat yang berbeda
Membuat Animasi 4uruf +engan Mas1ing @
+6
•
"gar animasi
dapat
berjalan dengan halus, maka dibutuhkan
tweening. aranya klik rame % layer "nimasiAklik kananA$reate $lassic Tween hingga tampilan frame menjadi seperti berikut
•
angkah
Membuat Animasi 4uruf +engan Mas1ing @
terakhir klik kanan
pada layer "nimasiAmask .
=aka
tampilan akan seolah H olah hilang dan kembali seperti semula. "kan tetapi hal tersebut menandakan masking telah berhasil. •
alu untuk melihat hasilnya, silahkan tekan tombol trl;?nter maka akan jadi seperti berikut C
Membuat Animasi 4uruf +engan Mas1ing @
+)
9. Mengenal Common $ibraries ommon libraries adalah semacam perpustakaannya adobe ash. 0ntuk mengaktikan dari common libraries tersebut silahkan • • •
!lik Gindow !lik ommon ibraries !lik library yang diinginkan (>uton, lasses, Sounds.
*ambar.%% ommon ibraries
&ni adalah tampilan dari ommon ibrary >utton
+7
*ambar.%+ ibraries >utton
&ni adalah tampilan dari ommon ibrary lasses
*ambar.%1 ibraries lasses
&ni adalah tampilan dari ommon ibrary Sounds +8
*ambar.%6 ibraries Sounds
9.7. Membuat 'ariasi Te1s #idalam adobe 'lash juga terdapat berbagai variasi teks yang bisa digunakan dalam membuat animasi. #iantaranya ada Static 2e$t, #ynamic 2e$t, dan &nput 2e$t.
+9
Stati Te!t 8 4enis 2eks yang tidak dapat diubah secara dinamis, 2ulisan yang tertera pada Static 2e$t tidak akan berubah selama movie dijalankan.
*ambar.%) Static 2e$t
+%nami Te!t 8 4enis teks yang dapat diubah secara dinamis. 2ulisan yang tertera pada #ynamic 2e$t dapat berubah selama movie dijalankan.
*ambar.%7 #ynamic 2e$t
In#ut Te!t 4enis teks berupa kotak isian, dan pemakai dapat memasukkan input didalamnya. &nput te$t biasa digunakan dalam orm aplikasi. +:
*ambar.%8 &nput 2e$t
9.9. Membuat Te1s 2eks yang dibuat 'lash dapat berupa teks mendatar (horiIontal, atau teks vertikal. 2eks yang kita buat dapat dimodifkasi menggunakan Properties 2e$t 2ool.
*ambar.%9 Properties 2e$t 2ool • • •
!lik 2e$t 2ool pada 2oolbo$ #idalam Properties 2e$t 2ool isilah sesuai yang diinginkan. !lik area dalam stage, sehingga muncul kotak tempat menuliskan teks.
+.Mengenali dan Membuat symbol 7. Mengenali S%mbol 1/
Symbol terdiri dari graphic, button, atau movieclip yang dibuat pada 'lash Pro menggunakan button ("ction Script +./, Simple >utton ("ction Script 1./, dan =ovie lip. Jang dapat digunakan kembali dalam dokumen lain.
*unakan symbol ra#hi (
untuk
gambar
statis
dan
untuk membuat potongan animasi yang terkait dalam timeline utama. "nimasi interakti dan suara tidak dapat digunakan dalam symbol *raphic. 2ambahkan symbol *raphic dalam dokumen ash karena *raphic tidak membutuhkan timeline, tidak seperti button dan =ovie lip.
*unakan symbol Button (
untuk
membuat
tombol
interakti yang merespon klik mouse, rollover, atau perintah lainnya. 0ntuk inormasi lebih lanjut, lihat tutorial selanjutnya. (cari tutor ttg "S
*unakan symbol Mo-ie Cli# (
untuk membuat potongan-
potongan animasi yang dapat digunakan kembali. =ovie lip memiliki 2imeline multirame sendiri yang independen dari 2imeline utama-bisa disebut multirame dalam =ovie lip tergabung dalam 2imeline utama yang dapat berisi control interakti, suara, dan bahkan =ovie lip yang lainnya. Selain itu, =ovie lip dapat diletakkan di dalam 2imeline symbol >utton untuk membuat >utton animasi. Sebagai tambahan, =ovie lip juga dapat diberi "ction Script.
*unakan
symbol
Font
untuk
meng-eksport
sebuah
ont
dan
menggunakannya pada dokumen 'lash Pro yang lain.
9. Membuat S%mbol =embuat symbol yang berisi animasi yang dibuat dengan aplikasi 'lash Pro memungkinkan untuk membuat banyak variasi dan meminimalkan ukuran fle. 4ika animasi yang digunakan berulang-ulang atau menggunakan gerakan yang sama-sebagai contoh, gerakan naik-turun pada sayap burung. 0ntuk menambah symbol dalam dokumen, gunakan ibrary "ssets yang berisi symbol-symbol yang telah digunakan atau yang sedang digunakan. #engan cara men-drag symbol dari ibrary "ssets ke dalam Stage.
Mengubah Sebuah 3lemen Menadi S%mbol 1%
Lakukan salah satu dari berikut
Pilih Modify - !onvert to "ymbol atau den#an menekan shortcut
%$
&ra# elemen yan# diseleksi ke panel Library
1+
'lik kanandan pilih !onvert to "ymbol dari !ontet Menu
&i dalam kotak !onvert to "ymbol, tulis nama symbol dan pilih jenis symbol (Movie !lip, utton, atau *raphic).
11
'lik +'.
KSetelah menjadi symbol, secara otomatis elemen yang dijadikan symbol akan masuk ke dalam ibrary. 0ntuk mengedit symbol, dapat dilakukan dengan memilih ?dit -< ?dit Symbol atau dengan ?dit -< ?dit &n Place.
Membuat S%mbol 2osong akukan salah satu dari berikut
Pilih nsert - ew "ymbol
'lik tombol ew "ymbol pada kiri bawah pada panel Library
16
Pilih ew "ymbol dari menu panel Library di sudut kanan atas panel Library
Pada kotak dialo# !reate ew "ymbol, tulis nama symbol dan pilih jenis symbol.
'lik +'.
ntuk membuat isi symbol, #unakan timeline, men##ambar den#an drawin# tools, men#impor media, atau membuat turunan dari symbol lainnya.
1)
0ntuk kembali ke mode document-editing, lakukan salah satu dari berikut
'lik tombol ack
Pilih /dit - /dit &ocument
17
'lik nama scene di /dit ar.
'lash Pro menambahkan symbol ke ibrary dan beralih ke mode symbolediting. #alam mode symbol-editing, nama symbol muncul di kiri atas Stage, dan titik hitam menandakan registration point symbol tersebut.
:. Membuat S%mbol Button
$rame pertama adalah p state, mewakili penampilan button setiap kali pointer mouse tidak menyentuh button.
$rame kedua adalah +ver state, mewakili penampilan button setiap kali pointer mouse menyentuh button.
$rame keti#a adalah &own state, mewakili penampilan button setiap kali button diklik.
18
$rame keempat adalah 0it state, mendefinisikan area fisik yan# merespon klik mouse. &aerah ini terlihat setiap kali file "1$ bermain di $lash Player.
Mengedit Symbol Button Lakukan cara berikut 2
&ouble klik pada button tersebut atau masuk edit kemudian pilih edit symbol
ntuk membuat isi symbol, #unakan timeline, menulis tet , men##ambar den#an drawin# tools, men#impor media, atau membuat turunan dari symbol lainnya.
3. Sound dan 'ideo Tentang enis File %ang +a#at di,Im#ort
•
ra#hi Format
File T%#e
3!tension
File T%#e
3!tension
Adobe
.ai
"dobe Photoshop
.psd
AutoCA+ +F
.d$
>itmap
.bmp
3nhaned
.em
'uture
Illustrator
6indo&s
Splash .spl
Player 19
MetaDle dan .gi
IF
4P?*
.jpg
.sw
Animated IF P
.png
'las Player 738
6indo&s
.wm
"dobe *raphic 'ile
MetaDle
•
L= .$g
Sound Format
File T%#e
3!tension
File T%#e
3!tension
Adobe
.asnd
Gave
.wav
File T%#e
3!tension
Soundboth .mp1
MP:
•
'ideo Format
File T%#e
3!tension Adobe .v, .6v
'ideo
Muick
2ime
.mov, .Nt
=ovie
Flash 'ideo
for
.avi
=P?*
6indo&s
.mpg, .mlv, .m+p, .m+t,
.m+ts,
.mts,
.tod,
.mpe, .mpeg
MP3,;
.mp6, .m6v, .avc
:PPE:PP9 for
.1gp,
mobile de-ies
1gp+, .1gpp+, .
.1gpp,
#igital Oideo
.dv, .dvi
.
1p+
•
Im#ort Sound
Pilih 'ile -< &mport -< &mport to ibrary.
1:
Pada kotak dialog &mport, pilih fle yang akan dimasukkan ke dalam 'lash.
Im#ort Sound 1e Timeline
mport suara ke dalam Library lebih dahulu.
6/
Pilih nsert - 3imeline - Layer.
Pada Layer yan# baru, dra# "ound dari Library ke dalam "ta#e. &ianjurkan, tiap sound diletakkan pada Layer yan# berbeda.
Pada 3imeline, pilih frame pertama yan# berisi file sound
Pilih 1indow - Properties - klik tanda panah di sudut kanan bawah untuk memperluas Property nspector. Pada Property inspector, pilih file sound dari pop-up menu.
Efek Pop-up Menu •
Pilih salah satu eek dari pop-up menu
6%
• •
• • •
5one, untuk menghapus eek yang sebelumnya diterapkan. et hannel3Bight hannel, untuk memainkan suara dari channel kanan3kiri saja. 'ade &n, secara bertahap meningkatkan volume suara. 'ade @ut, secara bertahap mengurangi volume suara. ustom, memungkinkan untuk membuat custom in dan out point menggunakan ?dit ?nvelope.
•
Pilih pilihan sinkronisasi dari pop-up menu.
atatan 4ika memasukkan lebih dari satu sound dalam satu layer, gunakan pilihan Stop.
6+
•
=asukkan value untuk menentukan berapa kali suara mau diulangi (loop, pilih loop untuk mengulangi suara terus menerus.
•
0ntuk mengetes suara, tarik playhead ke rame yang berisi suara atau gunakan tombol yang ada pada ontroller menu.
F. Ation Sri#t 7. Menelas1an Bahasa s%nta! ation sri#t 9.@ Pengunaan "ction Script pada movie clip selalu diikuti dengan event. 4adi "ction Script tersebut akan dijalankan pada saat event berlangsung. >ila 61
ingin membuat "ction Script pada movie clip, clik movie clip hingga muncul tulisan "ction H =ovie lip di atas docker "ction Script. alu ketik listing program pada tempat yang disediakan.
Ada bebera#a e-ent %ang lain misaln%a 8 oad Saat movie clip loading ?nter'rame Setiap movie clip menjalankan rame 0nload Saat movie clip di unload =ouse down Setiap klik mouse di tekan =ouse up Setiap klik mouse di lepas setelah di klik =ouse move Setiap mouse digerakkan !ey down Setiap tombol keyboard ditekan !ey up Setiap tombol keyboard dilepas setelah ditekan
. Menga#li1asi1an ation 8 #la%()"sto#()"gotoAndSto#()"gotoAndPla% *oto adalah perintah yang banyak terdapat pada berbagai bahasa pemrograman. 2ak terkecuali pada "ction Script 'lash. >ahkan pada "ction Script 'lash goto ada berbagai macam. Pada pokoknya ada + macam goto yang
•
dibedakan
karena
proses
melompatnya
yaitu
gotoAndPla% perintah ini digunakan untuk melompat ke suatu tempat dan langsung berjalan ke rame berikutnya atau animasi tetap berjalan tanpa berhenti.
•
gotoAndSto# perintah ini digunakan untuk melompat ke suatu tempat dan berhenti, jadi setelah melompat ke tempat tertentu animasi akan berhenti. Selain ke + perbedaan di atas, goto juga dibedakan tujuannya3typenya.
•
Frame umber pada type ini perintah goto diikuti dengan angka numerik yang menunjukkan ke rame berapa animasi harus melompat.
•
Frame $abel pada type ini perintah goto diikuti dengan nama3label rame yang berarti animasi akan melompat ke nama3label rame yang sesuai.
•
ne!tFrame () pada type ini perintah goto yang berarti melompat dan berhenti ke rame berikutnya. 66
•
#reFrame () pada type ini perintah goto yang berarti melompat dan berhenti
ke
rame
sebelumnya.
Contoh Penera#an 0ntuk lebih jelasnya mari kita membuat contoh aplikasinya. Pada gambar di atas memperlihatkan tampilan materi yang berisi 1 tombol navigasi dimana masing masing tombol memiliki masa tampil yang berbeda-beda. 0ntuk tombol home berisi "crionscript
on (release goto"ndStop(%C Q
0ntuk tombol back berisi "crionscript on (release prev'rame(C Q
6)
0ntuk tombol ne$t berisi "crionscript
on (release ne$t'rame(C Q
4.$oad Mo-ie >iasanya cara yang kita gunakan dalam memasukkan movie clip adalah dengan memasukkan movie clip tersebut kedalam library, setelah itu klik R drag fle tersebut kita masukkan kedalam rame yang kita inginkan. "pabila kita memasukkan movie clip secara langsung didalam project alsh kita seperti itu, biasanya proses eksekusi3loading akan terasa lama, apalagi bila movie yang dipanggil banyak, flenya besar dan komputer yang kita gunakan speknya minim pastilah loadingnya akan lama. >erikut + cara untuk memanggil movie clip secara eksternal yang akan meringankan loading movie clip kita.
$oad mo-ie dengan $e-el •
'ile sw dan diisi dengan animasi dengan nama movie%
•
>uat fle baru dengan nama movie+
•
=asukkan sebuah gambar pada stage
•
>uat sebuah tombol dan masukkan script berikut pada "ction Panel
on (release load=ovie5um (Emovie%.swF,%C 67
Q
•
2est =ovie
$oad mo-ie dengan Target •
'ile sw dan diisi dengan animasi dengan nama movie%
•
>uat fle baru dengan nama movie+
•
=asukkan sebuah gambar pada stage
•
>uat sebuah rectanggel tool dengan alpha %//
•
onert rectanggel tool tersebut menjadi movie clip dengan instant name EtargetF
•
>uat sebuah tombol dan masukkan script berikut pada "ction Panel
on (release load=ovie (Emovie%.swF,FtargtFC Q
•
2est =ovie
I. Membuat 2uis dengan Bantuan Ation Sri#t • • •
>uka program "dobe 'lash S). "dobe ash akan melakukan initialiIing. 2unggu hingga selesai. alu akan muncul jendela "dobe 'lash Proesional S).
68
•
Pilih "ction Script +./ pada kategori reate 5ew.
•
alu akan muncul stage3lembar kerja "dobe 'lash.
•
alu siapkan 1 buah layer. =asing masing beri nama script, content, dan background.
69
•
Pada layer content rame % isikan dengan judul pembukaan dari soal yang akan dibuat. >isa diiisi dengan kalimat pembuka sebelum menuju pada lembar soal.
•
Setelah dirasa cukup, maka pilih layer background untuk membuat tampilan background agar terlihat lebih menarik.
6:
•
2etap
pada
layer
yang
sama,
buatlah
sebuah
tombol
untuk
menghubungkan tampilan pembuka menuju tampilan berikutnya. 2ombol ini bisa dibuat secara manual maupun menggunakan tombol yang sudah disediakan "dobe 'lash Proesional S). =embuat tombol secara manual >uatlah objek bebas dengan menggunakan rectangular, o •
oval, pencil tool, maupun pen tool. >uat tombol sesuai dengan keinginan. >isa juga disisipkan teks pada tombol o
tersebut. Setelah objek selsai dibuat, seleksi objek tersebut dan ubah menjadi button dengan cara seleksi objek Aklik kananApilih convert
to symbolApada
E2ypeF, ubah
menjadi >uttonAberi nama tombol dengan mengetikkan
•
nama pada kolom E5ameFApilih @!. =aka 2ombolpun telah selesai dibuat. o =embuat tombol dengan asilitas ommon ibraries
)/
o o o o
o o
Pilihlah menu Gindow pada =enu >ar alu pilih ommon ibraries Pilih >utton. =aka akan muncul jendela ibrary >utton Pilih jenis >utton sesuai keinginan
#rag kearah stage maka 2ombol siap diiisi dengan Script 2eks E?nterFyang telah tersedia dapat diganti dengan teks yang diinginkan. aranya #ouble klik pada tombol ?nter tersebut =aka akan muncul timeline button
)%
>uka kunci dengan mengklik ikon lock (
layer te$t Tapus bjek pada rame up lalu ganti dengan teks
yang diinginkan. 4angan lupa untuk mengganti pula teks yang terdapat
pada
berpengaruh •
rame
pada
down
tombol
karena ketika
pada
akan tombol
dijalankan. Setelah pengerjaan content selesai, maka langkah selanjutnya adalah mengisikan script pada tombol. Script berungsi untuk memberikan perintah pada program yang dibuat. Tubungkan rame pembuka dengan rame selanjutnya untuk memulai kuis. aranya klik kanan pada >utton (tombol yang telah dibuat A pilih actions A lalu isikan script berikut
•
Setelah button terisi dengan script, maka selanjutnya adalah bekerja pada layer script. Pada rame % isikan script berikut
•
Setelah layer script rame % terisi oleh script, maka akan terdapat lambang alpha sebagai tanda bahwa rame tersebut telah terisi oleh script seperti berikut
)+
•
4ika
halaman
depan
telah
selesai
dibuat,
selanjutnya
membuat
pertanyaan atau soal-soal yang ingin ditampilkan. Soal yang akan dibuat tersebut letakkan di rame selanjutnya yaitu rame +. aranya, blok rame + pada setiap layerA pilih insertApilih timelineAblank keyrame pada setiap layer. =aka akan menjadi seperti berikut
•
Pada layer content, masukkan soal yang akan ditampilkan.
)1
•
akukan langkah yang sama untuk membuat pertanyaan H pertanyaan
•
pada rame berikutnya. 4ika pertanyaan dan jawaban selesai dibuat, maka langkah selanjutnya adalah membuat tombol pada setiap opsi jawaban. 2ombol dapat dibuat dengan cara manual maupun dengan menggunakan asilitas common libraries seperti langkah membuat tombol yang telah dibuat sebelumnya.
• •
akukan hal yang sama pada rame berikutnya. Setelah tombol terpasang pada tempatnya, isi tombol tersebut dengan script. Tal ini dimaksudkan agar ketika tombol ditekan, maka akan menuju
pada
pertanyaan-pertanyaan
pada
rame
berikutnya
dan
mendapatkan nilai. &sikan dengan script berikut
•
0ntuk tombol yang memuat nilai untuk jawaban benar, maka perlu tambahan script seperti berikut
•
akukan pula hal yang sama untuk tombol H tombol yang terdapat pada rame lain.
•
4ika seluruh soala dan tombol selasi dibuat, maka isikan script (
pada layer script pada masing masing rame hinggga terlihat tampilan seperti berikut
)6
•
4ika script sudah dimasukkan, maka lanagkah selanjutnya adalah membuat tampilan skor. aranya tambahkan rame baru pda masing-
•
masing layer. Pada layer content isi dengan
•
0ntuk menampilkan skor dari soal yang telah dikerjakan, dapat dibuat dengan menggunakan #ynamic te$t. aranya pilih te$t tool (
, lalu
pada jendela properties, ubah Static 2e$t menjadi #ynamic 2e$t.
))
•
•
>uat #ynamic 2e$t tersebut kedalam layer content.
Pada setiap #ynamic 2e$t tersebut isikan #ynamic 2e$t disebelah kanan jawaban benar &nstance name U skor Oariable U skor #ynamic 2e$t disebelah kanan 4awaban salah &nstance name U salah Oariable U salah #ynamic 2e$t disebelah kanan nilai &nstance name U nilai Oariable U nilai •
•
•
•
"tur jenis tampilan yang akan masuk ke dalam #ynamic 2e$t agar tampil menjadi angka atau bilangan dengan cara melekaukan embed pada #ynamic 2e$t.
)7
•
• • •
alu akan muncul jendela 'ont ?mbedding
Pada kolom haracter ranges tandai pada E"ll (%11+3:1)%6 glyphsF Pilih @! Sekarang kembali pada layer script. Pada layer script rame % silahkan tambahkan script berikut
•
alu pada rame lembar nilai pada layer script isikan dengan script berikut
)8
